Lesson 6: Getting Properties
App Lab | Maker Toolkit
This lesson introduces students to the
getProperty block, which allows them to access the properties of different elements with code. Students first practice using the block to determine what the user has input in various user interface elements. Students later use
setProperty together with the counter pattern to make elements move across the screen. A new screen element, the slider, and a new event trigger,
onChange, are also introduced.
So far, students have only used the button press event to gather information from the App Lab screen. Using
getProperty opens the students to gathering a wide range of information from the user. Getting properties also allows students to create programs that don't rely on knowing an element's properties when the code is written, so their programs can be more dynamic and interactive. These features will be important as students move toward making an interactive game in the next few lessons.
Warm Up (5 min)
Activity (40 min)
Wrap Up (10 min)
Warm Up (5 min)
Review: Ask students to think of the different types of information that they were able to get from the board in the last lesson (e.g. button presses, toggle state, etc.)
So far we've seen lots of ways that we can get information from our Circuit Playground. Today we're going to look at more ways that we can get information from the screen of our app.
Activity (40 min)
Send students to Code Studio.
Wrap Up (10 min)
For this prompt, you can "jigsaw" the answers by assigning different students or different groups each a type of input and answering questions on each type. The different answers can then be combined for a class reference on input types.
Journal Prompt: So far, you've seen several different types of input, some from the screen, and some from the circuit playground. Choose one type of input and answer the following questions about it.
- What code do you need to get information from this input?
- What's one example of when you would want to use this input?
- What's an example of when you wouldn't want to use this input?
Here's an example of an app that uses both
setProperty to update elements on the screen. Read through the code, and then test it out by filling out the input fields and clicking "Save"
Note: you don't need to change any code here, but read through the provided code to see how it works.
getProperty and Variables
This program uses the
name variable to display the name typed into "name_input" when the Submit button is clicked. It should do the same for friend_input and friend_output, but it's missing a block.
Text Inputs are nice when you want users to be able to enter anything they want, but often you want to restrict them to just a few choices. For example, if you want your user to pick a color, you probably want to make sure they can only choose colors that will actually work.
The provided dropdown with the ID "color_input" allows a user to choose from a handful of background colors. When the "Set Color" button is clicked, the screen will turn that color.
- Inside the event block, create a variable called
colorand assign it a value using the
- Hint: You'll need to use the "value" property to get the user's choice.
- Use the
setPropertyblock to set the "background-color" property of "screen1" to your variable
- Hint: Make sure you type
colorwithout quotation marks.
- Test your program by picking a color and clicking "Set Color".
Predict Level (See contained level for markdown)
Using the Circuit Playground
You can also use getters and setters with the Circuit Playground. For this level, you'll need to plug in your board.
Read through the code and predict what the program will do, then hit "Run" to test your prediction.
Using the Circuit Playground
Here's the same code you saw in the last level, but this time there's another dropdown menu to control the buzzer. You'll have to add the code to make it work.
- Using the LED code as a model, add new code inside the buttonL event that will play a long or short buzz according to the chosen value property of the buzzer_input dropdown menu.
- Add new code that will turn the buzzer off when the right button is pressed.
- (Hint: the event is already in the code.)
Last time, your users were only able to choose between a short and long buzz. To give the user control over the exact duration of the buzzer, you'll want to use a slider.
This slider lets users choose a value between 100 and 1000 for the duration of the buzz, but there's something not quite right about how it's working.
- Look over the code and find the bug that's keeping the duration from being set correctly.
- (Hint: Hover over the yellow triangles for clues as to what might be wrong with the code.)
This buzzer controller has been expanded to control frequency as well, but the code isn't finished yet.
- Using the
durationvariable as a model, create a
frequencyvariable that gets the value from the frequency slider.
- Modify the line of code that makes the buzzer sound so that it uses the
frequencyvariable rather than the default frequency of
- Run your code, then change the frequency and the duration to hear the difference in the buzzer. (Don't forget to hit the button after you make a change!)
Now we're using the slider to affect the behavior of the LED. Just as we could change the values for the frequency and duration of the buzzer, we can change the value for the blink or pulse interval of the LED.
- Read the code and predict what the program will do, then hit "Run" to test your prediction.
In the last level, the program only got the interval value from the slider when you pressed the left button. Sometimes, though, you'll want to change the interval of the LED as soon as the user chooses a new value. For that, you'll need the "change" event.
- Look at the first event block in the program and find where it says "change".
- Inside the event block, get the interval value from the slider and use it to make the LED blink at that new rate.
- Run your program, moving the slider to see whether the LED speed changes automatically.
This program has events that detect three different changes: the toggle switch, the interval slider, and the duration slider. Because there are so many different things that cause the LED and buzzer to reset, it uses functions to organize the code.
- Read the
updateLEDfunction to see what it does.
- Add code to
updateBuzzerto make the buzzer only turn on when the toggle switch is open.
LED and Buzzer Controller
This program operates the LED and the buzzer, but it has some problems.
- Read the program to understand how it is supposed to work.
- Find and correct the bugs so that the program works properly.
Movement with Properties
Earlier we used
setProperty to change the x and y position of elements on the screen, but we could only move them to either a single specific location, or a random location. By using
getProperty to find out an element's current position, we can use the counter pattern from Unit 3 to update that position.
- Read the program and discuss with your partner how the left button makes the motorcycle go up.
- Using the working left button as an example, program the right button to make the motorcycle go down.
Add Your Own Elements
Now it's time to add some elements of your own. The motorcycle should be able to move up and down right now, but how can you control its speed?
- Add a slider in design mode.
- Make sure you set the min and max values of the slider in design mode.
- Create an event that will trigger when the slider value is changed.
- Add code to get the slider value and store it into the
speedvariable when the event is triggered.
- (click tabs to see student view)
Use this program to experiment some more with getting and setting properties. Some ideas you might try include:
- Use the toggle switch to change the motorcycle's movement to go up and down.
- Use a dropdown with color names to change the motorcycle's color
- Make the buzzer or LED turn on when the motorcycle reaches the top or bottom of the screen.