French Flag explainer

The aim of this puzzle: Draw the French flag.
Walkthrough of the solution: Each drawBox() will draw one box. The color inside drawBox() determines the color of the box it draws, so drawBox(white) will draw one white box. newLine() moves the output onto a new line so that boxes drawn after newLine() will be below boxes drawn before newLine(). The French flag in this puzzle needs to be three boxes wide and two boxes tall. This means there needs to be 6 drawBox()’s since there need to be 6 boxes, and 1 newLine() for the boxes to be on top of each other. The pattern for the French flag is a blue stripe, then a white stripe, then a red stripe.
Sample code solution:
(Tap below to reveal)


JavaScript Concepts: Calling Functions, Identifiers
Grasshopper Concepts: drawBox(), newLine()


I don’t find a button to submit the code


Hey @Aarthi_Srinivasan,

Mmmm — that sounds buggy.

There should be a green button with a white arrow in it on the bottom right corner. Sometimes, this arrow can get hidden behind the keyboard. If you tap to compress the keyboard (the button that looks like a mini-keyboard with an arrow below it); so you see the green ‘play’ button in the bottom right corner?

H :slight_smile:

1 Like

Tried to submit with the keyboard on and off. No button visible in Google Pixel phone

Can you take a screenshot of the whole page om your phone and post it here?

Can’t see the button to submit either, even when keyboard is off.

In the tutorial, the play button is hidden if there is something else you need to fix. In this case, the popup hints are directing you to tap on your code again to start editing. It will ask you to use the “undo” button. It’s trying to get you to delete the extra row of the flag – the last 4 or 5 lines.


Hello, I’m having some difficulty understanding something. I’m on looping category, but I came back here to ask a question.

I’ve never done coding before, but is this this exaclty how it is? for example, if I actually use javascrip and put the function drawbox(red) in, it would actually draw a perfect red box? or is this function made up by you guys somehow and incorporated into the app?

drawBox is one of the custom functions just for the app. They were created using JavaScript, but the definition of drawBox is not built into JavaScript.

Once you unlock the Animations course and get to the puzzle called drawSquare, you’ll be able to draw a colored box on the screen. Later in that course, there’s a puzzle called Rainbow Hopper that adds the grasshopper jumping and also makes each new box appear next to the previous one instead of drawing on top of it.


When doing French flag whether I tap drawbar or newline it tells me “you wouldn’t want to replace with a command like this” What is the problem?

If you tap anywhere in your code to bring up the button keyboard, you should see a button in the top row to reset the puzzle. It looks like 2 arrows forming a circle. From there, you should be able to follow the blue and red popup hints to solve the puzzle. If you’re still having trouble, you can post a screenshot of your code here.


There is no space to type and the screen is frozen. I am stuck! Please help. Thank you.

Hey there, try adjusting some display settings on your device. Specifically look for settings related to screen resolution or display zoom. Changing the screen resolution to be a bit higher, or the display zoom to be a bit lower, should fix this problem!

If you have any other issues, submit a bug report from within the app, and our support team can help you troubleshoot the issue there.

Hope this helps!