Lesson 5: GUIfy my program!
About this lesson
This is the fifth in a series of lessons to incorporate Graphical User Interfaces (GUIs) into your General Purpose Programming. The series follows on from the Visual To Text Coding lesson series.
Year band: 7-8Curriculum Links Assessment
Links with Digital Technologies Curriculum Area
|Processes and Production Skills||7-8||
Design the user experience of a digital system, generating, evaluating and communicating alternative designs (ACTDIP028)
Design algorithms represented diagrammatically and in English, and trace algorithms to predict output for a given input and to identify errors (ACTDIP029)
Implement and modify programs with user interfaces involving branching, iteration and functions in general-purpose programming language (ACTDIP030)
Students undertake a self-reflection of the programming task. The teacher can use the completed self-assessments to assist in summative assessment.
You and your friend are co-developing an application with the ability to save progress.
As a helpful feature, your friend proposes a pop-up for when the user tries to exit the program without saving their work:
As a class, discuss if you see any problem with the above UI design for this pop-up. For comparison, bring up a similar pop-up when exiting Microsoft Word, Notepad or another application like Audacity.
ICMA Photos/ Wikimedia Commons, CC BY-SA 2.0
There is a serious problem with this design. It does not conform with user expectations for the placement of the three buttons.
The convention for pop-ups of this kind is for the Cancel button to be on the right. A user pressing the right-most button in this dialog may be expecting to return to their work without exiting, but instead they would be confirming to exit and lose their work.
The activity above touches on the last of 4 principles for good User Interface design (distilled from this article hosted by Adobe): Make user interfaces consistent. A GUI should:
- employ visual consistency (same style, fonts, colours throughout)
- functional consistency (no surprises in the way the UI behaves)
- conform with user expectations (follow conventions and avoid reinventing)
Learning map and outcomes
In this lesson, students will:
- upgrade a text-only heads or tails game to a full GUI with animation,
- examine two other completed GUI applications upgraded from text-only.
The main example in this lesson is a heads or tails game.
Next, access the starter project for the new GUI version here. It contains skeleton code that will be built on as the lesson progresses.
Finally, view the video below. It gives an overview of the whole lesson and explains the starter project.
Step 1: Setup
In this course, different environments will be selected based on their suitability for each demonstrated project. This lesson uses the repl.it environment exclusively.
For more on the set-up and environments used, see Lesson 1.
Step 2: Constructing the Heads Or Tails game
This game is the most complex of the GUI applications made in this course so far. Each video below tackles a part of the coding process.
First, set up the function for user button presses.
Next, begin the code for flipping the coin.
Next, flip the coin images and stop after a random number of flips.
Now, complete the basic game by checking if the user's guess matches the coin after it stops.
Step 3: Improving the Heads Or Tails Game
First, we'll add a scoring system.
Next, keep track of how many turns it takes the user to win.
Finally, improve the buttons and fonts.
Step 4: Two other GUI applications
Before the major project, here are two more completed GUI applications for you to look at.
Scissors Paper Rock (original text-only program from this lesson)
View this web-based tutorial on Scissors Paper Rock. This tutorial covers the groundwork of making a function 'scissor paper rock' game with console.log output. Once you have completed this tutorial, the next one goes into more advanced features like changing scores and having a 'spinning' computer guess icon.
Magic 8 Ball (original text-only program from this lesson)
(Students may also wish to test an experimental mobile version of this webpage, which responds to tilting the mobile device. To do so, access this link on a mobile device. Unfortunately, repl.it does not reliably support these features at time of writing, so students cannot edit the code.)
This lesson does not include a fresh coding challenge. Students can undertake a final project as set out on this page.
- JSFiddle – simple interface that hides linking HTML code, also used in Visual To Text Coding lesson series
- repl.it – shows complete HTML to reflect offline approach, and allows uploading of images and other files for use in webpages
- Introductory courses
- HTML tutorial – An introduction to HTML
- CSS tutorial – An introduction to CSS