Bug - unit 5 lesson 8

[Posts in the debugging category need to have the following pieces of information included in order to help other teachers or our moderator team best help you. Feel free to delete everything in brackets before posting your request for debugging help.]

Link to the project or level: [Unit 5 lesson 8 - https://studio.code.org/projects/applab/R64mY2EKvRaa7UF9AiZCybyatl0D7obB6H5mSDbTSK0/edit?fbclid=IwAR1lxp2WYkB34TjSxoRo1-WzBaXV9gVPRQO9rKMhwgDJ47Hmqgcod94IfLs]
What I expect to happen: [if I do setProperty: IconSize, the icon size would change (lines 13, 19, & 20]
What actually happens: [I get an error message.]
What I’ve tried: [I had to set icon width and icon height separately (what is shown on the current program)]

This has been hard to figure out as a black box. So I looked at the source code for App Lab.

Each element type has a list of properties that can be set by setProperty. That list of properties is populated into the dropdown list of choices after you choose an id. Prior to that choice, the dropdown list has more properties than are valid for any one element type.

The properties that are allowed are not necessarily the property or style that gets changed. For example "icon-color" affects the data-icon-color. Other properties are set directly as named. Those properties are in a white list of properties that will not break the sandbox and checked at runtime. All properties sent are checked against the same dropdown list that you choose them from for validity, again at run time. They are not checked prior to running the code.

So if you drag and drop setProperty into your program and choose a property before choosing an element you can select a property that will not work. One such property is "icon-size". As far as I can tell that property is not valid for any element type and probably should be removed. When you run the program it throws an error.

I said earlier that I look at properties available in HTML and CSS to try to guess what property might work. That is a really bad idea. Not all properties use the same name, nor are they in the white list of allowed properties. Instead, you want to fill each parameter from the dropdown in left to right order; dropdown the id and choose, then drop down the property and choose again. Doing that guarantees you will not get a runtime error.

When in text mode the dropdown list will appear as you type. Use the list. The documentation seems incomplete.

Screenshot 2020-12-29 at 8.26.06 PM

So for this lesson, it seems like a bug because we are not using a defined element id as we create our code. We expect all the properties to work. But because we are computing the element id as "image" + i the dropdown list of properties includes some that will not work with an image. I recommend choosing one of the images like "image0" then choose the property. Then change the id to the computed value. That way you know you chose well.

2 Likes