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.

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

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

Student Instructions

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

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

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

Student Instructions

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.

Student Instructions

change

This program has events that detect three different changes: the toggle switch, the interval slider, and the frequency 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.

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.

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.

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.

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.