How do I put in a watcher in App Lab

CS Discoveries
1

Can anyone give me an example of a watcher I could use in App Lab? My students want to see the x value of an id, but I’m not sure how to put it in since the id and property are separate parameters. I’m stuck in a dot-property mindset; I know how to use a watcher for sprite.x, but not id x-property.
Thanks for any guidance!

2

Hi @shannon_spisak,

With App Lab, you use getProperty to find the different attributes of objects. I have made an example of a basic setup for creating variables to view these attributes. I hope this helps:)

~Michelle

3

@melynn, Thanks for the reply. In the watcher is says variable/property so I was hoping we could use it with UI elements. I know how to use getProperty, but my students hadn’t learned it yet and we were trying to use what they did know.

4

I believe you need the “getProperty” getter to access the x value even in the watcher. I am not aware of a way to point to the x property of an object with the getter. From the documentation, it’s purpose is to let you “see the current value of any property listed in Design mode for a given UI element”.
~Michelle

5

I found this thread when I was trying to figure out why using a watchers as a debugging tool for variables in unit 6 didn’t seem to work for me. I’ve been assuming it has something to do with global/local variables but am having trouble confirming this and getting a good explanation for why since there isn’t really coverage of this in the Discoveries curriculum.

@melynn I took a look at the example program you posted. If you use the console.log block where you have it (line 5) and try to print the value of x, you’ll get an error saying x hasn’t been declared yet. If the console.log block is moved inside the onEvent (to line 4), the value will print in the console.log. I’m assuming this is related to the local/global variable issue?

My original question came up when I was working with a student on Unit 6 Lesson 9 Level 8d. She wasn’t sure where the bug was for screen 1. Since it’s checking to see if the user’s answer is “Mountain Ibex” or not, I suggested we start with seeing if the variable “trial1Answer”’ is storing the value we were expecting. I added “trial1Answer” as a watcher and continued to get . Is this happening because the variable is declared inside the onEvent and is therefore a local variable? Does that mean watchers are only useful for Global variables?

This is the only documentation I’ve seen about variable scope and it explicitly says to not use var inside onEvents which is what I’ve been telling students but then all of a sudden Unit 6 does it all the time…

Help?!?

6

Hi @mreeves,

These are very insightful observations.

You are correct that the watcher is only able to see global variables or at least as far as I can tell. It does make sense I suppose since it doesn’t technically have access to the local variables created in functions or events. So, console.log can be used for any variables including local variables and the watcher can be used for global variables.

Just as the documentation emphasizes, I try to teach students to use global variables to prevent access issues. As programs get more complicated, local variables can make more sense simply because they are things only the function or event needs but as students get more advanced, this concept is easier for them to recognize and use correctly. And yes, newer programming students tend to make mistakes with declaring the same variable twice both globally and locally.

Which brings up your comment about seeing conflicts between the documentation for variable scope (always use global variables) and what students are actually seeing in Unit 6. I would ask that you let documentation@code.org know the conflicts that you have seen. I am guessing they would want to be aware of these issues.

FYI - on your student’s project, when they are using getProperty(“trial1Dropdown”, “options”), “options” is ALL of the choices in the dropdown in the form of a list or an array. It would need to be changed to text to check if the users choice is equal to “Mountain Ibex”.

~Michelle

1 Like
7

I’d agree that using global variables is more useful in most cases however if it’s a 1 time calculation that doesn’t need to be stored outside of the anonymous function would be a waste of memory and would generally make the code worse to look through because you then have to look at a bunch of global variables of which makes it way more confusing

for debugging purposes it would make sense but in the long run after fixing it you shouldn’t keep it global if you don’t need to, something like this would represent acceptable debugging

// demo
function math(a, b) {
return (a * b - b * 2)
}
// debugged (makes it visible to the watcher)
var container;
function math(a, b) {
 container = a * b - b * 2
 return (container);
}
1 Like
8

Thanks. I’ll send my thoughts on the documentation to the email you provided.

For the Unit 6 Lesson 9 activity I mentioned, I actually steared the student towards using getProperty(“trial1Dropdown”, “value”) since the “value” property is what all the previous levels used for accessing what the user chooses from a dropdown element and “value” is also what the teacher solution used. The documentation for getProperty() says that “value” is only used with numbers and the slider UI which also seems to be misleading since it’s used with dropdowns all over the place.