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.
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:
In this lesson, students will:
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.
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.
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.
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.
Before the major project, here are two more completed GUI applications for you to look at.
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.
(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.