Home Teach and assess Classroom resources Courses or tutorials Coding for GUIs (Javascript edition) course Lesson 5: GUIfy my program!
Lesson 5: GUIfy my program! Image

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-8

Curriculum Links Assessment

Learning sequence

Download Lesson

Learning hook

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:

A pop-up option that reads: Save your work? Do you wish to save your work before quitting? Cancel, save or don't save

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.

Image credit:
ICMA Photos/ Wikimedia Commons, CC BY-SA 2.0

Possible answer

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:

  1. access an online programming environment for JavaScript alongside HTML and CSS,
  2. upgrade a text-only heads or tails game to a full GUI with animation,
  3. examine two other completed GUI applications upgraded from text-only.

Learning input

The main example in this lesson is a heads or tails game.

First, review and test the text-only version of the game in JavaScript here. (The game was first introduced and built in Lesson 3 of the course previous to this one).

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.

Learning construction

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.

Solution Code

Next, begin the code for flipping the coin.

Solution Code

Next, flip the coin images and stop after a random number of flips.

Solution Code

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

Solution Code

First, we'll add a scoring system.

Solution Code

Next, keep track of how many turns it takes the user to win.

Solution Code

Finally, improve the buttons and fonts.

Step 4: Two other GUI applications

Solution Code

Before the major project, here are two more completed GUI applications for you to look at.

Test them out first, then take the time to step through the HTML, CSS and JavaScript to see if you can follow how they work. Tinker with some of the code to change the behaviour of the programs.

A poster showing the hand signals for paper, scissors and rock

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.

 

A magic 8 ball with the response: Reply hazy, try again

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

Challenge

This lesson does not include a fresh coding challenge. Students can undertake a final project as set out on this page.

Resources

  • Online environments for creating webpages with HTML, CSS and JavaScript:
  • Introductory courses
  • JavaScript CheatSheet (Tip: Press the little blue tabs to move Variables, Basics, Strings and Data Types to the top.)