Checkerboard explainer


The aim of this puzzle: Create a checkerboard pattern using colors from an array.
Walkthrough of the solution: The beginning of the code creates an array called colors which just contains two strings: 'black' and 'white'. In JavaScript, the items in an array are numbered from beginning to end, starting at zero and going up just like regular counting. That means 'black' is the 0th item in the colors array and 'white' is the 1st item in the colors array. You’re able to choose a specific item from an array using the item’s index which is just a number. Since you want the first box of the checkerboard to be black, you need to use the 0th item from the colors array by using colors[0]. Now that you know how to access the 'black' item in the array, you want to use it to draw a black box – simply put it inside of drawBox(). That means drawBox(colors[0]) will draw a black box (as long as you don’t change the first color listed in the colors array!). drawBox(colors[1]) will always draw a box that’s the color of the second item in the colors array. To make your checkerboard pattern, you just need to keep switching between drawBox(colors[0]) and drawBox(colors[1]) and make sure you have a newLine() every three boxes.
Sample code solution:
(Tap below to reveal)

var colors = [

JavaScript Concepts: Calling Functions, Identifiers, Arrays, Indexing, Variable Declaration
Grasshopper Concepts: drawBox(), newLine()

Checkerboard help

Antes de um teste deveria ser explicado o tópico. Neste puzzle por exemplo, não havia nada antes sobre “indexing”. Isto faz o aprendizado ser irritante.


Hi I just want to comment that the directions after getting an incorrect answer stating that the colors must be blue or red or green is very misleading


If your code includes drawBox(colors), you’ll get the red error that says: “Error: drawBox color object must have properties red, green, and blue”.

This is confusing because this puzzle comes before learning about objects in the Object Expression section. We’ll change the wording of that error to be less misleading. Thanks for mentioning it!



Why does it not know that zero is black?Screenshot_20180427-112340


You are on the right track almost there, Try closing out your colors array.


var colors = [

Then you can use the drawBox functions with color index references. Have fun coding :slight_smile:


I tried that it would not work what’s the problem?


What did you try? What kind of error or message are you getting?

The tricky part of this puzzle is making sure all the brackets and parentheses are in the correct place. Luckily, the starter code has all of these in the right order when you start, so all you have to change are the numbers inside of the brackets []. You can reset the puzzle by opening button keyboard and then tapping the circular arrows button.



I got that one too:grinning:


Why can’t I enable the brackets???

I keep getting it wrong. It’s okay to make fun of me since I’m so stupid anyway!


There are 2 different bracket keys: [ ] and ◂ []

[ ] : Create a new array
◂ [] : Get a specific element from an array. This button gets attached to the name of an array.

In this puzzle you don’t actually need to use either of those keys. You can just change the index number between the brackets.



It’s not working.It says that draw box needs red blue or green


I think you may be seeing the error that says, “drawBox color object must have properties red, green, and blue”.

This happens if the thing inside the parentheses of drawBox() is not a valid color. Perhaps, you have drawBox(colors) in your code.

The colors variable is storing an array of strings, so drawBox(colors) is like drawBox(['black','white']). That won’t work because drawBox() doesn’t know what to do with an array. Try using just 1 item from the array by adding the ◂ [] key to the colors. Then you can put in the index of the item you want (0 for 'black' or 1 for 'white').



I can’t complete the puzzle because the brackets are in the wrong place


You can reset the puzzle using the button on the top row of the keyboard, next to the undo button. From there, you only need to edit the numbers inside the brackets.



For some reason, I find it very difficult to just tap and select an individual number. Instead, when I tap, it selects the number and variable (e.g. colors [0]). I have to tap over and over again before it will just select the number.


Thanks for letting us know. We have a fix that will be released in the next update that widens the selection area for single characters like this.



Umm my code is just like the code in the sample, what did I do wrong? And if you could please indicate the exact line and what I need to enter


The 3rd drawBox() call is different from the rest. Notice the order of parentheses and brackets. The square brackets should be attached to the colors array, and the parentheses of drawBox() should surround the whole colors[0].

drawBox( colors )[0], should be changed to:
drawBox( colors[0] )

The 4th drawBox() call should be deleted. That one is trying to use the whole colors array as an argument.

One other thing that will be helpful to remember is that 0 is not exactly the same as '0'.
0 is a number
'0' is a string
Luckily, JavaScript will work using either one (it will try to convert the index to a string behind the scenes).



Thanks for the quick response. You’re way better than college professors.