As part of a graphical user interface (GUI), input controls are the different elements available to your user for providing information and issuing commands, such as buttons, text fields or checkboxes.
Note: The activity above touches on the first of four principles for good user interface design (distilled from this article hosted by Adobe). For users to feel in control, a GUI should be:
Image: mohamed Hassan/pixabay
In this lesson, students will:
In this course, different environments will be selected based on their suitability for each demonstrated project.
For more on the set-up and environments used, see Lesson 1.
The video below demonstrates changing the wi-fi checker from a text-only program to one with a GUI.
Let's start with some terms. Try it yourself before checking the solution code.
The video below further improves the wi-fi checker by adding a spinner/updown control, which gives an instant response.
Try implementing this improvement before checking the solution code.
The video below demonstrates upgrading a temperature converter to a GUI.
Try coding this GUI version yourself before checking the solution code.
These challenges use the skills covered so far. By writing or modifying their own programs, students have an opportunity to demonstrate ‘application’ and ‘creation’.
The links opposite are a simple text-only application for converting currency. Test it out before continuing.
This video gives an overview of one sample solution.
This video demonstrates building the same solution.
Could you improve it further by removing the need for pop-up prompts?
This challenge is to create a GUI to allow you to experiment with an input control you haven't tried yet. For example, if you are trying radio buttons/option buttons, you might create a simple application that constructs a movie idea as a sentence based on your selections (e.g. gender of main character, setting, genre).
This W3Schools webpage lists the many type attributes that allow different input controls to be made with the <input> tag.