Skip to main content
Skip to main content

Coding for GUIs (JavaScript edition)
Lesson 5: GUIfy my program!

Years 5-6; 7-8

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.

Included videos can be used by a beginner teacher and/or students to see how to code each of the simple programs step-by-step with HTML, CSS and JavaScript.

This lesson may take two to three 45-minute periods. It steps through the complete upgrading of a Heads or Tails game from text-only to GUI with animation. Two other completed GUI programs are also provided for students to examine.

 


     
Final project    


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.

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.

Completed code so far:

Next, begin the code for flipping the coin.

Completed code so far:

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

Completed code so far:

Now, complete the basic game by checking if the user's guess matches the coin after it stops.

Completed code so far:

Step 3: Improving the Heads Or Tails Game

First, we'll add a scoring system.

Completed code so far:

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

Completed code so far:

Finally, improve the buttons and fonts.

Completed code so far:

Step 4: Two other GUI applications

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