Lesson 6: Getting Properties

App Lab | Maker Toolkit

Overview

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 getProperty and 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.

Purpose

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.

Agenda

Warm Up (5 min)

Activity (40 min)

Wrap Up (10 min)

Teaching Guide

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.)

Remarks

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)

Teaching Tip

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.

  1. What code do you need to get information from this input?
  2. What's one example of when you would want to use this input?
  3. What's an example of when you wouldn't want to use this input?
View on Code Studio

Student Instructions

Updating Properties

Here's an example of an app that uses both getProperty and 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.

View on Code Studio

Student Instructions

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.

Do This

  • Read the code and comments, then run the program to see how it works. (Make sure you type in your name and your friend's name before hitting "Submit".)
  • Use a getProperty block to store the text property of friend_input into your the variable "friend_name". (Show me where.)
View on Code Studio

Student Instructions

Dropdowns

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.

Do This

  • Inside the event block, create a variable called color and assign it a value using the getProperty block.
  • Hint: You'll need to use the "value" property to get the user's choice.
  • Use the setProperty block to set the "background-color" property of "screen1" to your variable color.
  • Hint: Make sure you type color without quotation marks.
  • Test your program by picking a color and clicking "Set Color".
View on Code Studio

Student Instructions

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.

View on Code Studio

Student Instructions

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.

Do This

  • 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.)
View on Code Studio

Student Instructions

Sliders

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.

Do This

  • 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.)
View on Code Studio

Student Instructions

Frequency

This buzzer controller has been expanded to control frequency as well, but the code isn't finished yet.

Do This

  • Using the duration variable as a model, create a frequency variable that gets the value from the frequency slider.
  • Modify the line of code that makes the buzzer sound so that it uses the frequency variable rather than the default frequency of 500.
  • 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!)
View on Code Studio

Student Instructions

Predict Level

Interval

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.

Do This

  • Read the code and predict what the program will do, then hit "Run" to test your prediction.
View on Code Studio

Student Instructions

Change

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.

Do This

  • 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.
View on Code Studio

Student Instructions

change

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.

Do This

  • Read the updateLED function to see what it does.
  • Add code to updateBuzzer to make the buzzer only turn on when the toggle switch is open.
View on Code Studio

Student Instructions

LED and Buzzer Controller

This program operates the LED and the buzzer, but it has some problems.

Do This

  • Read the program to understand how it is supposed to work.
  • Find and correct the bugs so that the program works properly.
  • Motorcycle
  • 15
  • 16
  • (click tabs to see student view)
View on Code Studio

Student Instructions

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.

Do This

  • 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.
View on Code Studio

Student Instructions

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?

Do This

  • 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 speed variable when the event is triggered.
  • Levels
  • Extra
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Challenge

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.