Accessible Apps, Part 2
The first group of problems that allow you to practice building an accessible user interface.Create a Switch: User Interface
Build a light switch application using the template code in the tray. A working app will run and display a page. The page should have one label named "light" displaying the word "Off" and a button labeled "Switch". In addition, each interface element should be saved as a variable as seen in the template blocks.
Create a Switch: Behavior
In this task, create a Behavior for the Switch button. This behavior is triggered when the switch button is selected. When the button is selected, the run action in MyBehavior will get the light label and swap the text from off to on or on to off.
Swap to the MyBehavior.quorum tab. Read through the existing code. Then add and edit the blocks in the tray to the Run action in this tab. When the behavior is completed, the Switch button will change the label's text.
Create a Switch: Add to a Behavior
In this task, add the lightoff.png icon to the top of the switch app. When the button is selected, the program should switch the label and the icon. Add the blocks from the tray to add the icon to the page. Then, add the ability to change from the lightoff.png icon to the lighton.png icon or from the lighton.png icon to the lightoff.png icon.
Create a Thermostat: Design
In the first of three thermostat apps, follow the instructions to design an app. This app will display a banner, a group of images, a temperature label, and two buttons to raise and lower the temperature. You will add the banner, label, and two buttons to the app in this programming problem. You will not need to add the group of images. They are already part of the program.
Start by building an understanding of the code in the program. Then add a banner with the title Home Thermostat App. Choose a subtitle that describes how to use the app(e.g., Select the buttons to raise or lower the temperature!). Then, add a label for the temperature and name it CurrentTemperature. Next, set the text of the label to display the value of the variable temperature and set the font size to 24. Finally, add the raise and lower buttons and set the words displayed on the buttons.Run the program once you have created each interface element. When this program is run, it will display a banner, three images, a starting temperature of 70, a raise button, and a lower button.
Create a Thermostat: Behavior
In this second of three thermostat apps, build off the existing program and add a behavior to the raise and lower buttons. To do this, build out the TemperatureBehavior.quorum. This behavior will need to get the button that was selected from the event parameter. It will also need to access the temperature variable from the form. Using these two items, decide which button was clicked. Then either raise or lower the temperature by one. Next, be sure to update the temperature stored in the form.
Once the behavior has been built, connect the behavior to each of the buttons. In Main.quorum, create a TemperatureBehavior object using the blocks in the tray. Then use the blocks that call SetBehavior for the buttons.
Create a Thermostat: Features
In the last of three thermostat apps, add an "I'm Feeling Lucky" button to the app. This button should set the temperature to a random temperature between 60 and 90 degrees.
Start by adding the button and setting its behavior. Then add to the behavior so that if the new button is selected, it sets the temperature to a random value between 60 and 90. Once you have completed your program, make sure it runs. Then test each button. If your tests show there is a problem in the logic, try to find and correct the mistake.