Coding for GUIs (JavaScript edition)
Lesson 4: Flipping images

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.

This video builds the digital clock application from the ground up.

Try it yourself before checking the solution code.

• You'll need these six images for the die sides:
  • 1.png
  • 2.png
  • 3.png
  • 4.png
  • 5.png
  • 6.png

The short video below demonstrates how the same application can optionally be developed offline on your own computer desktop.

Remember, you'll need a plain text editor to edit the code files (.html, .css and .js). Do not attempt to use a standard Word Processor like Microsoft Word or Google Docs.

By editing the HTML, CSS and JavaScript, upgrade the dice roll application as follows:

• Instead of two 6-sided dice, the program now rolls two 12-sided dice.

• You'll need these additional twelve images for the new die's sides:

  • BigDie01.png
  • BigDie02.png
  • BigDie03.png
  • BigDie04.png
  • BigDie05.png
  • BigDie06.png
  • BigDie07.png
  • BigDie08.png
  • BigDie09.png
  • BigDie10.png
  • BigDie11.png
  • BigDie12.png

  (Images screen-captured from teal 3D dice roller website.)

Extra extension task: The user now has a choice whether to roll 6-sided dice or 12-sided dice.

The video below demonstrates how to create a dynamic data visualisation showing how much sugar is in various drinks.

Try it yourself before checking the solution code.

Make the following adjustments to the solution

• Research one more drink of your choice. You'll need an image of the drink as well as the number of teaspoons of sugar in it.
• By editing the HTML, CSS and JavaScript, add the new drink to the solution so that it behaves like the others.
• Also add a link to your source below the first source in the footer.

1. This challenge is to create a new dynamic data visualisation, using a small amount of data sourced from an online repository or a class survey.

   • Start by deciding what data you will try to display. A simple set of 10 or fewer values is enough.
   • Prepare an annotated mock-up to show how the solution will looks and work. When the user clicks or mouses over a category, your solution might:
     • repeat an image to represent a whole number, similar to the 'How much sugar?' approach,
     • scale a single image to represent different relative amounts (see the sample solution below),
     • perform some other visualisation of data.
   • Find or create the image(s) you'll need for your solution.
   • Use HTML, CSS and JavaScript to create the data visualisation. You might begin by forking the 'How much sugar?' solution in this lesson.

2. This second challenge is more open-ended. Now that you know how to switch images, see if you can create a simple game that employs buttons to take actions and a single image to represent a location or status.

   For example:

   • An adventure game with buttons to move North, South, East and West. A text area explains what is happening in the story, and an image gives an illustration.
   • A combat game with buttons to attack, defend or use magic/items. The enemy is shown as an image that changes as the enemy is wounded or defeated.

   Games like the above will involve significantly more JavaScript code than previous challenges in this course. Consider organising your code with functions for the buttons and a main function called to update the game once a button has its effect.