Image Decoder explainer


The aim of this puzzle: Draw boxes, based on letters, to reveal an image when all of the letter ‘e’s are filtered out.
Walkthrough of the solution: For this puzzle, you need to update the section within the if statement’s condition — if (this bit) {}. An if statement’s condition controls whether the part in the curly brackets runs {}. If the condition statement is True, the code will run. If it is False, the code inside the curly brackets will not run. The for loop is looping through each letter stored in the variable img (img is a string of letters). For each letter, you want to check to see if it is 'e', and draw a box if it is not 'e'. This means most of the time we want the condition to be True (draw a box) and only be False (not draw a box) if the letter is equal to 'e'. You can use the symbol !==, which means “is not equal to”, to make the if statement’s condition True for most letters, and False when it finds a letter 'e'.
Sample code solution:
(Tap below to reveal)

for (var letter of img) {
  if (letter !== 'e') {

JavaScript Concepts: Code Block (if statement), Calling Functions, Identifiers, Loops, Conditionals (if statement), Variable Declaration
Grasshopper Concepts: drawBoxes()

Additional Code (hidden code that runs before the puzzle’s code):

var img = 'ewvveewvvw wiiwiiw webbwbbew weeggweggw ewyyewyyew woowoowe wrreewrrw';


Where are these 'e’s coming from. Where is the rest of this code so we can see what we’re editing? So confusing without context.


My thoughts exactly. How am I supposed to understand this language if I can’t see everything I’m doing.


Hey @Dylan_Harper and @Joseph_Hoffmeister,

Yup — good feedback :slight_smile: I mentioned elsewhere; we are working to surface this additional (hidden) code.

The reason it’s not with the puzzle code is to allow you to focus on the parts of the code you need to edit, rather than being overwhelmed with a lot of code you don’t need to touch (since the phone screen size is small, there is limited real estate).

Thanks for the feedback!
H :slight_smile:


It’s more confusing not knowing what img is equal to. This is greatly hindering the learning process


I’m a new coder
This one skips too many
I’m confused
I think it’s great that you want us to focus on the important part of this lesson
But remembered, since I’m new to coding, I may learn something wrong
Maybe you should tell more before the puzzle


I need to know what is the string held inside “img” and what does the letter “e” means to fully understand what I am doing.


Hi @Paul_Lai,

This is the declaration of img:

var img =  "ewvveewvvw wiiwiiw webbwbbew weeggweggw ewyyewyyew woowoowe wrreewrrw"

When you run the for loop, it ignores all the e letters. So the output ends up being the same as drawBoxes('wvvwvvw wiiwiiw wbbwbbw wggwggw wyywyyw woowoow wrrwrrw').

Hoping this helps you understand more!
H :slight_smile:


I would agree with the other posters, without knowing what the image code is you really aren’t learning much here. I can make the code work but I didn’t get much out of it until I checked the forums.
I will say that so far this is a great learning tool. I am enjoying it.


This app has been great up till now, but this is the first example of a badly proposed lesson. It looks like you’re aware of the issue and working to address it.


Now it makes sense, before, I’m not know what the code were doing.
I understand what you wanted to teach us but without some information… It’s pretty confusing

Sorry but my English… I’m learning it too​:joy::joy:


So e is empty?
When I try my answer is repeating and not all the colors.
Everything was great till this lesson.
They are not making themselves clear at all.
And what is ‘this bit’ about?


This lesson is the first one that was very confusing. You should include the rest of the code, maybe grey’d out or something, so we get an idea of what we’re changing and why it acts like that


This one caused me to scratch my head a lot.
I had to look up support.
Do agree that you may want to state either contents of the string upfront or put a disclaimer that it has a string.
Also I think the variable name of “img” could be changed, in absence of the above info, to something else.
Cause my first reaction was to look up the “image”.


I’m a little confused about the command ‘for’.
In the code the var letter received each character from IMG. My question is. Where in the code is showing the steps of ‘for’ and the size of var letter. It could be more than one letter?


Heather, I was so stuck until I saw that. Helps that you’re thinking of including that in the app.

Thanks for explaining here!


Actually, would it be more like this:



This exercise may need to be broken down into at least two parts. The jump in complexity from the previous exercise (Rainbow) is huge. The entire “e’s in img” has no meaningful context so the instruction to “filter” them out confuses matters exponentially. Putting missing details back in & maybe splitting this up might help reduce confusion/frustration.


@Rikk, Thanks for the feedback! H :slight_smile:


@Rafael_Moutinho, the value the looping variable is holding changes with each loop.

So, in the code:

for (var letter of img) {

The loop starts by looking at the value held by the variable img and assigns it’s first element to letter. So, if img is holding the string 'hello', at the start of the first loop letter will be holding 'h'. At the start of the second loop, letter will be holding 'e', on the third loop letter will be holding 'l', and so on.

Hoping this helps explain the looping variable!
H :slight_smile: