Lesson 4: Flipping images
About this lesson
This is the fourth 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.
In pairs, students should visit userinyerface.com and try the challenge.
User Inyerface is an online ‘game’ where the player must survive working through a frustratingly designed sign-up form. The challenge is to see whether you can get through the whole form.
While working through, the student pair needs to write down as many poor user interface design choices as they can.
Note: Although the game does not use personal details, it is recommended that students enter fake details when filling out the form.
Finally, come together as a class and have student pairs call out each design problem as you proceed through. For each one, discuss what could have been done instead to improve the user experience.
The activity above touches on the third of 4 principles for good User Interface design (distilled from this article hosted by Adobe): Reduce cognitive load. A GUI should:
- organise elements visually for clarity, chunking or grouping elements where appropriate
- allow recognition through familiar symbols and tooltips
- minimise the number of actions required to complete a task (e g. the 'three click rule-of-thumb')
Image credit: www_slon_pics/ Pixabay
Learning map and outcomes
In this lesson, students will:
- create an interactive dice roll simulation with dice face images that change when you roll,
- create a dynamic data visualisation to show teaspoons of sugar in various drinks,
- take on a fresh coding challenge to create your own dynamic data visualisation.
The videos below introduce the two main applications we'll make in this lesson.
Discuss as a class: How can students ensure that images they are using in their GUIs are not restricted due to copyright?
By understanding Creative Commons and Public Domain licenses, and learning about the places to find them, students can use images appropriately, giving attribution when necessary.
Step 1: Setup
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.
Step 2: Constructing the dice roll simulator
This video builds the digital clock application from the ground up.
Try it yourself before checking the solution code.
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.
Step 3: Tinkering with the dice roll simulator
A simple website is made up of files inside folders just like on your computer. To make the site online so that other people can access it, the files must be placed on a host web server. (While it is possible to make your own computer into a web server, this is generally unwise because it greatly increases your exposure to cyber attacks. Instead, web page content files are usually hosted by dedicated companies.)
To work with plain text files on your own computer:
- Windows comes with Notepad.
- Mac comes with TextEdit.
Notepad ++ logo
- 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:
(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.
Step 4: Second program – how much sugar?
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.
Step 5: Tinkering with the visualisation
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.
- Also add a link to your source below the first source in the footer.
These challenges use the skills covered so far. By writing or modifying their own programs, students have an opportunity to demonstrate Application and Creation.
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.
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.
- 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.
- 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