4CCS1PRA

Programming Applications

Lab Assignment

Lab 3: Four Pictures, One Word

Introduction
The third lab session focuses on a more fully developed GUI, continuing the basics of GUI layout that
you covered in the last minor piece of coursework.

Pair programming exercises

As with the first PRA lab, some of the exercises in this lab involve working in pairs, with this work to
be completed within your timetabled lab session. Please do not work with whomever you worked with
for the first two minor pieces of coursework work with someone else, from your lab session
There is also an individual exercise, for you to work on on your own. You may complete this either in
or out of the lab.

Assessment
The lab work is formally assessed the marks count towards your final mark for this module.
You need to submit all work via KEATS by 23:00 on Saturday the 28 th of February, and you
must attend your timetabled PRA lab in the week commencing the 2 nd of March, to have the
work marked. Failure to do either of these, without an approved ERF/NEA, will result in you
receiving zero marks for your work.
Please submit your work on time and attend the lab for marking. For notes regarding what happens if
things go wrong, please see the latter pages of the instructions for the first lab; and if in doubt, talk to
your personal tutor.

Last changed: 6 February 2015

Four Pictures, One Word

The task is to develop a word game where a word is to be guessed, and four pictures are displayed
as a clue. As with the classic game hangman, the word is initially shown as blanks; where the number
of blanks is the length of the word. The difference is that the player is given a selection of possible
letters (of which just a few are in the word) and they must choose from these.
Note that your GUI design must not be fixed to one level of the game. The example above is just one
level: on other levels, there will always be four pictures (or the name of the game would be a lie), but
the word to be guessed, the pictures themselves, and the number of letters to choose from (and what
they are) varies.

Pair Exercise 1 Making a class for the game logic

When developing your application, remember the discussion of three-tiered architectures and
separation of GUI and logic in your implementation. Remind yourself what we said about coupling
between these tiers and about the techniques we used to reduce coupling between back-end logic
and GUI. Aim to achieve similar decoupling in your implementation.
In particular, first, before doing anything GUI-related, you need to create a class for the back-end logic
in this case, the rules of the game. A Four Pictures game is defined by three things:

A selection of letters from which the user can choose (e.g. a String abcdef if the letters to
choose from are a,b,c,d,e and f);

The filenames of the four pictures (an array of four Strings);

The word that is the answer (a String);

Last changed: 6 February 2015

Create a class, FourPictures, that has a constructor that takes each of these, and stores them in
member variables.
In addition, make a member variable to store the revealed word: the letters in the answer, that have
been correctly guessed so far. Initialise this in your constructor. It should initially be all 'blanks' (the
underscore character), separated by spaces. If the answer is n letters long, there should be n blanks,
with a space between each of them. For instance, for paris, the revealed word would be '_ _ _ _ _'
(five blanks, with a space between each).
It should then, for instance, be possible to run the following code as a main method:
String filenames[] = {"Paris1.jpg", "Paris2.jpg",
"Paris3.jpg", "Paris4.jpg"};
FourPictures game1 = new FourPictures("paris","pysitrla", filenames);
FourPictures game2 = new FourPictures("paris","eipfrasncywv", filenames);
Note, here, the revealed word is not passed to the constructor: this will be given a value by code
inside the constructor.
As you progress through the exercises, you will need to use and update the FourPictures class, e.g.
with accessor methods for its member variables.

Pair Exercise 2 Creating the GUI layout

There are three key parts to the GUI, shown on the previous page:

A label showing 'Guess: ' followed by the revealed word (initially, as in the screen-shot, blanks
separated by spaces);

The four pictures, in a 2x2 grid;

The selection of letters, each on their own button.

Write code that will make this GUI, for a given FourPictures object. A suggested implementation is to
break the job into a number of stages:

a) Create a JFrame, with three sections.

A JLabel for the current revealed portion of the word, at NORTH (hint: HTML formatting is an
easy way of getting a large font).

A JPanel in the CENTER, which we can use for the four images;

A JPanel at the SOUTH, which we can use for the letters.

Last changed: 6 February 2015

Note, to get full marks for this exercise, you must make a class that extends JFrame, e.g:
public class GameWindow extends JFrame {
public GameWindow(FourPictures game) {
...code here adding GUI components to 'this'...
}
}
For various important reasons, you should do the above instead of the following:
public class GameWindow {
public GameWindow(FourPictures game) {
JFrame f = new JFrame();
...code here adding GUI components to f... // not so great
}
}
And certainly, whatever you do, don't do a combination of the two:
public class GameWindow extends JFrame { // Okay so far
public GameWindow(FourPictures game) {
JFrame f = new JFrame();

// No!

...code here adding components to f, even though 'this' is a JFrame...

}
}

// Really, do not do this!

b) Show your window

Amend the example main method on the previous page, to make two instances of the JFrame object
you created in part (a) - one for game1, and one for game2. Make each of them visible. They'll be
empty at the moment, other than the JLabel at the top; but that's okay you can now see them, which
makes it much easier to debug your code.

c) Load the images

Inside your JFrame, add the four images to the centre JPanel.
Hint: There are many ways to load images in Java and display them in GUIs. If in doubt, have a look
at the notes on the ImageIcon class:
http://docs.oracle.com/javase/7/docs/api/javax/swing/ImageIcon.html
NB The four paris images, with the filenames Paris1.jpg, Paris2.jpg... are on KEATS. If you are
using Eclipse, download these and save them into your Eclipse project directory not into src/ or
build/, into the project directory itself e.g. /home/andrew/workspace/FourPictures .

Last changed: 6 February 2015

d) Create the buttons at the bottom

(For now, don't worry about making the buttons work, just make them look right.)
Create a JButton for each of the letters there are to choose from in the game being displayed. Add
each of these buttons to the panel at the bottom. Layout is important here: there should be at most
two rows of buttons.

Pair Exercise 3 Button pressing

When a button is pressed at the bottom of the window, three things should happen:

The button should become invisible;

The revealed word inside the FourPictures class, should be updated. Add a method to the
FourPictures class to do this, and call it from your event handler. To be clear what it needs to
do:

Suppose the word to be guessed is 'paris' and the revealed word was previously _ _ _ _ _
(five blanks, separated by spaces)

If the user clicks on 'a' this should be changed to _ a _ _ _ : the second blank is replaced
with the letter 'a', because the second character in the word was 'a'

There is still a space between each letter or blank.

The label at the top of the JFrame should be updated, to show this new revealed word.

Finally, once the user has guessed the word, make all the buttons disappear, replacing the content of
the panel at the bottom with a label containing the word 'Correct!'.
At this point, you should now have a functioning game. Your application should load two windows,
which you can move to be side-by-side. They should both work as separate, self-contained instances
of the game; just with a different selection of letters to choose from.

Pair Exercise 4 Adding a 'Hint' button

Add a 'Hint' button (labelled '?'), shown alongside the letters in the panel at the bottom of the window.
When this is pressed:

A letter that is in the answer, but has not yet been revealed, is clicked on. The corresponding
button thus disappears from the panel at the bottom, and that letter is revealed (as in Pair
Exercise 3).

The hint button disappears, too, limiting the user to one hint per game.

Last changed: 6 February 2015

Pair Exercise 5 Levels (Advanced)

This is an advanced requirement even if you do not complete this, you will still be able to get
a respectable mark.
So far, you have looked at just one level of the game. It wouldn't be much of a game if it stopped
here. For this exercise you are going to read a list of levels from the Internet, and use these; rather
than having hard-wired game objects created in your main method.
There are two links (URLs) you can use for the list of levels:

http://www.inf.kcl.ac.uk/staff/andrew/fourpictures/levels.php . This contains many levels: two I

have created, and those submitted by you and your classmates in the Individual Exercise
below.

http://www.inf.kcl.ac.uk/staff/andrew/fourpictures/two-levels.txt . This contains two levels that I

have created. Use this if you fear you may be offended by your classmates' ideas for levels.

Importantly, do not just save one of these links to disk, then read from the file you will get no
marks for this. Your application must read directly from one of these two URLs, when it is run; so, if
the list of levels on the web server changes, the levels displayed in your application will change. If
you have not read from a URL before have a look at the following Oracle tutorial:
http://docs.oracle.com/javase/tutorial/networking/urls/readingURL.html
If you open one of the links above in a web browser, you can see the format of the list of levels is as
follows:

The answer
The letters to choose from
The URL of picture 1
The URL of picture 2
The URL of picture 3
The URL of picture 4

This then repeats, as many times as necessary, to define all the levels.
You will need to do two things for this exercise:
(a) Write code to open the list of levels from a URL; then read through the lines and create a
FourPictures object for each level.
(b) Amend your GUI class, so instead of taking a single FourPictures object, it takes a List
containing all the FourPictures objects; and additionally, has a 'next level' button, that updates the
GUI to show the next level on the list. This button should be greyed out until the user has correctly
guessed the answer to the current level.

Last changed: 6 February 2015

Pair Exercises Submission instructions

Create a .zip file 'PairExercises.zip' containing all of your code i.e. all the Java files you created as
part of the pair exercises. You and your pair-partner should both submit identical copies of this zip
file, by the deadline.

Individual Exercise
On the PRA KEATS page, there is a link where you can submit a level for the game. Each student
can contribute one level, and the details are stored to create the 'levels.php' link given earlier.
For this exercise, you should submit a level. The form will ask for the answer (e.g. paris), the letters
to choose from (e.g. pysitrla), and links to four images. You should choose these yourself; but
don't use paris or london as your answer, as that would be too obvious.
One good source of images of the right sort of size is Wikimedia Commons if you search for images
on there, the thumbnails are a reasonable size to use for the game. You can find the URL for a
thumbnail by right-clicking it, and choosing 'Copy image location' (or the equivalent in your web
browser). Paste the URLs for four images into the form, and then submit your level. Once submitted,
it will display the details of the level so you can confirm they are correct; if not, repeat the process until
you are happy with your level submission.
You are reminded at this point of the college Information Technology Services regulations. Treat this
exercise as if you were posting on a discussion forum visible to your class, so e.g. do not submit
obscene images, or use obscene language; and do not post content that harasses, bullies or
discriminates against other members of the college. Breach of these regulations is covered by the B3
Misconduct regulations.

Support outside of the lab

If you have general queries regarding the work, outside your scheduled lab time, a reasonable first
port-of-call is to post in the coursework question forum on KEATS that way, all students in the class
can benefit from the answer to your question. In addition to this, there are three opportunities for
support:

The helpdesk, open Monday to Friday from 1:30pm to 4:30pm (13:30 to 16:30).
Liana's PRA drop-in clinic, once a week, on Wednesdays, from 12:00 to 14:00, in K4U.13/14
Andrew and Steffen's office hours. Details of staff office hours are always available from:
https://internal.kcl.ac.uk/nms/depts/informatics/stu/geninfo/officehours.aspx

Any other comments or queries that cannot be dealt with via these routes, email both
andrew.coles@kcl.ac.uk and steffen.zschaler@kcl.ac.uk . For best results, please use your @kcl
email address (so we know who you are); include a meaningful subject line (so we know it isn't spam);
and only send one email to us both rather than copy-and-pasting the same text into two separate
emails.

Last changed: 6 February 2015

Marking
Your work will be marked by a TA in your fourth PRA lab session (week commencing 2 nd March). As
well as ensuring your work is marked in a timely manner, this is a good opportunity to get immediate
feedback on your work, which you can learn from and apply later in the course.
This piece of work counts for 2.5% of your overall module mark for PRA. You will be awarded a mark
between 0 and 5 (inclusive) so each mark is worth half a percent. Your mark is determined by
adding together two marks:

A quality mark between 0 and 2. Code that has no noticeable bugs gets 2 marks; code with
minor bugs gets 1 mark; code with major bugs gets 0 marks.

A completeness mark between 0 and 3. A fully completed piece of coursework gets 3

marks; an empty piece of coursework gets 0 marks. Everything else falls in between.

Please note that because this work is marked in your PRA lab, and involves you going through your
code with a TA, you must attend your timetabled PRA lab to have your work marked. Otherwise,
you may receive a mark of zero. In case of illness or other mitigating circumstances that mean you
are unable to attend your lab to have your work marked, you will need to submit an Notification of
Examination Absence (NEA) form to the departmental office, as soon as you are able to do so,
enclosing evidence. If the NEA is approved, arrangements will be made to mark your work on another
occasion.

Provisional marks
Under the college regulations, the mark you receive in the lab is provisional. The TA marking your
work will recommend to Andrew and Steffen that you receive that mark. Andrew and Steffen will then
review and record the marks awarded, to then be reviewed and approved by the board of examiners.
Until this point, all marks are subject to change.
If you disagree with your provisional mark, please do not argue with the TAs: contact Andrew and
Steffen via email, explaining the issue. This does not prejudice your right to later appeal under
section A6 of the regulations. For further advice on appeals, contact your personal tutor or the
KCLSU appeals advice service.

Last changed: 6 February 2015