COMP1710 Assignment + Report: Semester 1 2021

Summary of submission snapshot deadlines:

 Assignment Part 1: 11:00am Monday Week 6 (29/08/2022) AEST

 Assignment Part 2: 11:00am Monday Week 8 (26/09/2022) AEST
 Assignment Part 3: 11:00am Monday Week 12 (24/10/2022) AEDT
 Report : 11:55pm Sunday Week 12 (30/10/2022) AEDT

Assignment

The purpose of the overall assignment is to demonstrate what you have learned in this course.
You will do this by creating a coherently themed web site using the design ideas and
construction techniques you have learnt in the lectures and labs. The assignment is worth a
total of 30 marks and will be submitted in three parts. We will mark by looking at the main
site via your index.html page. Make sure it is not spelled with a capital 'I' and that you can
see the contents via a browser. We may not be able to find parts of your website you need to
get marks for so you must make sure that all of the content you want marked is linked via the
separate assignment.html page, this is like an "assignment cover sheet" that accompanies
your website.

The theme of your assignment will be Me and/or my passion.

What does this mean? Well, here is your chance to build a website introducing yourself or
your great interest to the world. Whether your passion is for model aircraft building, haute
couture, quantum physics or medieval Hungarian literature — tell (and/or show) us about it.

If you have an alternative topic or subject you are keen to work on you can email me and we
may be able to negotiate the alternative (make sure you keep the email in which I agree to
your alternative topic).

The tasks listed below set out the minimum requirements for each part of the assignment.
You can always do extra things, and we won't ignore them in marking - so they may earn you
extra marks to compensate for other things you don't do as well. To make sure we don't miss
it, mention these things in the assignment.html page.

Unfortunately, web browsers are still not 100% identical in their behavior, so web pages may
behave differently on different browsers. For this course, please use Chrome, Firefox or
Safari for development, and please specify in assignment.html what is the best way to view
your website (e.g. Do you use Chrome for the browser? Is your screen resolution 1366 x
768?)

Report

The Report task involves COMP1710 students taking part in two or more Human-Computer
Interaction research experiments which add up to 2 hours, and then writing a report on their
experiences as experiment participants. In this report the students will (i) describe the purpose
of each experiment and their personal experience of taking part in the experiment, (ii)
compare their experiences across the different experiments and (iii) write what they have
learned about the relevance of participant-focused experiments like these to the overall
process of designing and building a set of web pages.

For most students, it's easier to write the report after having participated in the experiments.
Participation in experiments / is a hurdle assessment. We will use the Research School of
Psychology's experiment management software (SONA) for you to participate in
experiments.

1.0 Part 1 Tasks

1.1 Info and Review

The first step of the assignment is to fill in the assignment topic form. The form does not
work well in Internet Explorer! Please review the Fair Use document document to understand
what is tolerable to do and what is strictly prohibited in the context of this Assignment.

1.2 Introduce Yourself and/or Your Passion

Introduce yourself and/or your passion, interest or hobby etc. Write a mission statement or
list of goals similar to the idea of a brief statement of the mission and list of goals in chapter 1
of the Unusually Useful Web Book. This section should probably take 200-400 words or so.

1.3 Create a CSS

Create an external (separate) CSS file. Use at least 10 CSS rules. Make sure your CSS
includes comments that would be useful to someone taking over the maintenance of your site,
things like the purpose of each rule, exceptions to its use and the choice you made as to
which selector you specified.

If you create more than one CSS make sure they are deployed in a Cascading manner, i.e.
there should be at least one default CSS that will be applied to all the pages in your site, with
specialised CSS then being applied to specific pages of the web site.

1.4 Build a Site Map

This page should clearly depict the organisation/structure of the web site, possibly using a
table or links (or both) or an image map. Make sure you update the site map as you expand
your web site in Parts 2 and 3.

1.5 Provide a Source Log

You will need to keep a log. A typical log describes the list of sources you used for your
project and the modifications you applied to them. The origin of the source should be given
in enough detail to ensure the marker can access the source whenever it is possible (URL,
ISBN etc). Make sure you update the source log as you expand your web site in Parts 2 and
3.
1.6 Provide an opportunity for feedback

Create a page which takes feedback from visitors to your site via a form.

1.7 Separate assignment page from passion pages

The top page of your website is the usual index.html. You will also include an
assignment.html file that will be explained to you in the first lab. Use and modify the
assignment.html page which lists all the assignment requirements for this assignment, and
make sure it provides direct links to your content. E.g. the source log or feedback page may
not be relevant to your passion so you can avoid showing it to normal users coming in via the
index.html page, but for marking purposes we need to find this content so it should be linked
to from your assignment.html page.

The choices you make can be briefly explained in your assignment.html page, but don't write
too much there, as we are marking your web page for your passion and the assignment.html
page is mainly to help us find all the components we want to mark.

The MOOC materials and tasks have significant overlap with the Assignment Part 1. You
will need to add some extra components to the MOOC tasks and that is your Assignment Part
1.

1.8 Active Participation

Provide URL links to your two best Piazza posts.

2.0 Part 2 Tasks

In the second part of your assignment you will add content and possibly enhance your design.

2.1 Provide an Image Map

Create a page which displays one or more image maps. Make sure that there are at least 3
links, with proper labels in your image map.

2.2 Provide a Photo Gallery

Take or select at least 10 relevant photographs. Convert the photographs to *.png format. Use
a template or a suitable tool like Galerie to present them with appropriate titles and any
comments you wish to make. Your photo gallery should have the same look and feel as the
rest of the web site. The easiest way to achieve this is to ensure it uses the same CSS. Or it
may be appropriate for you to link to content stored elsewhere on the internet.

2.3 & 2.4 Videos or Javascript

For 2.3 and 2.4, you can choose either to develop a storyboard (2.3a) and a video (2.4a), or
write some javascript to add interactivity (2.3b and 2.4b).
Please note that you WILL NOT get extra marks if you do both so please indicate which
components you would like us to assess.

2.3a Develop a Storyboard (for your video)

Create a storyboard for your video as a comic (see the relevant lab). The key thing is to
present your plan of how you intend your video (see 3.1) to look after editing.

The comic and the video (see next task) should represent the same story. It should be possible
to understand the video by reading the comic, and understand the comic by watching the
video.

2.4a Make an edited, inline video

Shoot (or collect) and edit a video and present it on the website. The video (i.e. about your
subject, its the same video) should contain at least one title and one transition. It will be
inlined within a web page. Use your creativity and originality to do something interesting,
useful or just funny.

For video cameras and especially digital still cameras with movie mode, don't forget to use a
tripod or video stabilisation. Keep in mind that video cameras are not the only source of
video. For example, many modern digital cameras in movie mode will produce video
recording which are fine for web delivery. Then there is video capture from a running
program, and so on.

Last year almost everyone had access to a video camera or digital still camera with movie
mode from family / friends / church / work / etc. If you end up unable to find someone with
one, please e-mail me and I will try and help.

I suggest 5 minutes absolute max for the final video. You should also provide a few words on
your site describing what the video is about and/or trying to achieve.

2.3b Javascript addition （optional INSTEAD of 2.3a）

We will be looking for an excellent JS addition to your website that complements your
theme. We expect you to speak with your tutor about your proposed JS element(s) so that you
can determine whether your proposed JS addition is ‘right-sized’ for this assignment part.

2.4b Well written Javascript (optional INSTEAD of 2.4a)

The javascript code needs to be functional, well structured, properly commented, and clearly
indented.

2.5 More active participation

Links to 1 more Piazza posts go here.

3.0 Part 3 Tasks
3.1 Provide a reflective "About my site" page

This should be a couple of paragraphs reflecting on what you have learnt about website
design while actually doing it. E.g. are there things which if you had realised earlier you
would have done different?

3.2 Provide an alternative CSS page

Create at least one extra CSS page which transforms the appearance of your website, either in
an interesting way or into a more printer-friendly format. Please specify how we can view the
two different effects (original and alternative) of your css.

3.3 Provide a Social Networking button

Your site could do with more exposure, or at least once you release it into the wild beyond
the ANU limited space of partch/liskov. Please provide a working button for a social
networking or similar site such as done in the lab or lecture related to this topic. If your theme
is such that none of this is relevant then please link to this from your assignment.html file,
and of course mention why it was not relevant for you.

3.4 Provide a Social Networking feed(s)

Please provide a working social networking feed you have learnt about in the relevant lab. If
your theme is such that none of this is relevant then please email me and we may be able to
negotiate the alternative (make sure you keep the email in which I agree to your alternative
topic).

3.5 Validate your CSS and your HTML pages

Run your CSS and HTML pages through the W3C validation service. Create a page (or
another photo gallery) showing some screenshots (if you're not sure how to take screenshots -
google it) of the validation report. If you need to leave some validation errors to achieve the
look you want, make a comment in your assignment.html file to explain.

3.6 Provide something original

Get creative and add a component or content which differs from the tasks listed above. It
might be an extra page presenting some interesting content you made or wrote yourself, or
which provides links to sites you have found useful while making the site, or which are about
related or relevant subjects. or it might be something made with a tool you have researched
and learnt to use yourself. Don't get stressed - this is meant to allow you to be creative in
some way, and get marks for it.

4.0 Report (detailed instructions)

In the process of developing an interactive computer system, which includes web
development, it is essential to conduct user evaluations of those systems. In the activities for
this report task you will be involved as a participant in two or more experiments that add up
to 2 hours. All the experiments from Computer Science or from Psychology have strong
similarities with the types of user evaluations that you would conduct for your web
development. When you take part in these experiments you are expected to treat them as
learning exercises for yourself. You will pay attention to the purpose of the experiment, you
will observe what it is like to participate in that experiment, you will think critically about the
way the experiment is conducted and you will reflect on what you can learn from that
experiment that might be relevant to user evaluations of web pages and web sites.

Writing the report will give you practice in formal writing about your observations,
experience and reflections of taking part in these experiments. In the report, you will choose
two experiments that you have participated in, and write in detail about the two experiments.
There are two main kinds of experiments: a) where you participate and do tasks and will
provide data which the experimenter can compare to results from other participants, and b)
where you act like an experimenter for at least part of an experiment, and you explicitly
compare two or more devices/images/videos/events/etc. The two tasks you describe in the
report must include one of each of these two types of experiments.

4.1 Structure

Your report should contain these components:

A title and your name.

Abstract: This will typically be one paragraph that says what the report is, why it was written
and what it is about. Write this abstract last so that it actually matches what is in the report.

Introduction: This will be slightly more detailed than the Abstract. It will explain what the
report is about, it will list the experiments in which you took part and it will summarise the
contents of the report. Proof-read this introduction when you have finished writing the report
to make sure it actually matches what is in the report.

First Experiment*: This has three sub-sections.

 Summarise the experiment. Here you describe the purpose of the experiment and
describe what you were asked to do. Refer to the Information Sheet that the
experimenters will have given you.
 Describe your experience of taking part in the experiment. Were you asked to do
mechanical tasks or were you asked to be an intelligent participant? Did you enjoy
taking part in the experiment? Did you find the experiment difficult or easy? Did you
understand what you were asked to do?
 Comment on what you thought were the strengths and weaknesses of the experiment.
Did you think that the experiment actually met the aims that were stated in the
Information Sheet? Was the experiment well-conducted or was it chaotic and
confusing? Did you think that the data the experimenters were gathering was reliable?

Second Experiment*: Also three sub-sections, like the first experiment.

Comparison of the two Experiments: Describe in what ways the two experiments (and your
participation in them) were similar or different. Compare how you felt about taking part in
each of the experiments. Compare how well you thought the two experiments were run.

Relevance of user-participation experiments to web design and development: Discuss what

your experience of taking part in these experiments implies for the relevance of user-
participation experiments in web design. The broad computer science area of Human-
Computer Interaction (HCI) includes web design and user-evaluation experiments (similar to
the experiments in which you took part) are really important in the HCI development process.
You might like to look for material about user-evaluation in HCI on the web or in text books
and include it in this discussion. Be sure to cite any material that you refer to and include that
material in your reference list in the last section of your report.

References: In this section you list any documents or web pages that you referred to in the
body of the report. Be sure to list every item that you refer to (including the Information
Sheets that the experimenters give you) and be sure to refer in your report to every item in
this list of references.

4.2 Layout and size of your report

Your report will typically be 3-4 A4 pages, using a 12-point font and approximately 2
centimetre margins. Use headings and sub-headings to give visual structure to the report.
Break your text into paragraphs, where each paragraph focuses on a particular item or
concept. Put page numbers in the footer of your report.

4.3 Provide a link to your report file

You should upload your report as PDF document to your partch public_html folder, name it
u1234567-report1710.pdf (use your UniID instead of u1234567), and put in a link to it from
your assignment.html file so we can find it. Do check that link to make sure the file is
readable via a web browser.

* If you are unable to participate in experiments (though keep in mind many are able to be
done remotely) or don’t wish to, the alternative is to read papers we give you: the Wattle
course page will list two papers you can read, for the primary and secondary experiments.
You thus write the report by imagining you were participating in the primary experiment, or
in the secondary experiment. So, you can:

 report on participation in two experiments,

 or report on participation in an experiment and read a paper for the other kind of
experiment (and write up by summarising and imagining what it would have been
like),
 or read the papers instead for both kinds of experiments (and summarise and compare
the two papers).

Most people find that reporting on experiments is much easier than reading and summarising
the papers.

Most important: don't get stressed, its not too hard, we won't mark too hard. But do try and
write clearly.
Assessment
Each part will be marked separately and marks will be allocated in the following way:

 Assignment Part 1 is worth 10 marks

 Assignment Part 2 is worth 10 marks
 Assignment Part 3 is worth 10 marks
 The Report is worth 15 marks

What will gain (or lose) you marks in the assignment?

50% of your assignment mark will depend on consistency:

 How thoroughly you deliver the requirements listed above.

50% of your assignment mark will depend on coherence and quality:

 How coherent your site is in terms of its stated theme.

 The quality of your presentation:
o Visually.
o Textually (good english/netlish).
o The design does not interfere with the message, or detract from the meaning.
o The site's readability is good across a wide range of window sizes and screen
resolutions.
 The quality of your HTML, CSS and commenting, for eg:
o Content and presentation are clearly separated into HTML and CSS.
o The code is well structured.
o The code complies with W3C standards.
o Indentation and commenting have been used to good effect.
o The structure and names of folders and files are simple, clear and meaningful.
 The creativity of your content and presentation.
 Any additional work or research you put into the site.

What will gain (or lose) you marks in the report?

The report is worth 15 marks towards your course's grade and the report will be marked in
units of half a mark.

The Abstract, Introduction and the sections covering the first and second experiment will
together be worth 7 marks.

The comparison of the two experiments and your discussion of the relevance of user-
participation experiments in web design will together be worth 7 marks.

 Your own reflections and conclusions from participation in experiments.

 The quality of your writing:
 o Coherence - do your paragraphs combine to "tell a story" about your
experience in experiments? (Or your summarisation of papers.)
o Textually (good english/coherent narrative within sections and between
sections).
 The reflection on your experiment participation.
o What was it like?
o Did you learn anything?
o Did you enjoy it or hate it? Why did you feel that way? Does this suggest any
conclusions?
 Your conclusion about the relationship of web design and human computer
interaction.
 For both the reflection and conclusion:
o There are no right or wrong opinions, there are just well expressed and argued
opinions, and badly expressed or unclear opinions.

The overall structure of the report will be worth 1 mark.

 The structure of your report includes:

o Using all the sections a report normally contains such as Abstract,
Introduction, and so on.
o Textual quality (good english/citing references).
o Using some visual content, not just words (a picture is worth a thousand words
...).

Any additional work or research you put into the assignment or report may gain you marks to
compensate for missed marks in other areas.

Late Penalties
Late assessments (assignments and report) will be penalised at the rate of one (1) mark per
day, or part thereof, that the assessments is overdue. Assessments more than seven (7) days
late will not be accepted. If you have an extension then its not late until that extension is over.

If you need to apply for an extension you should contact me and explain your situation before
the deadline (e-mail is best). I am quite reasonable about extensions for unforseen
circumstances. I am not allowed to give extensions for you having too many assignments at
the same time, as that is considered *not* unforeseen by the School.

Tips
The assignment is not too difficult technically, but you will need to devote some thought to
how it will all fit together. This is because your final product has two potentially
contradictory goals. On the one hand you must maximise your marks by meeting all the
criteria specified above, but on the other hand you must ensure the thematic coherence of
your site.
Virtually all the assignment tasks are based on your lab work (and MOOC materials for part
1). If a task seems unclear, check the related lab sheet again - I didn't want to duplicate
everything in the lab sheets here so that may be why the description here is short.

Make sure your content is easily accessible - if the marker can't find something - whether one
of the mandatory tasks or something special and unique you have made - you won't get marks
for it.

Lastly, an assignment checklist —

 I have my own copy of everything I’m handing in.

 My assignment satisfies all the assessment criteria.
 It all works — I’ve checked it in a variety of circumstances.
 I’ve used CSS, not tables, for page layout.
 I’ve made good use of the available HTML tags to clarify the meaning of the content.
 My id and class attributes have simple, meaningful values.
 All my files are in the right folders and have sensible names.
 It’s going to be useful to me later.

The report is also straightforward, but its best if you do not leave it to the last minute. Write a
draft, leave it for a day or two, and you will find lots of things to improve as you will see it
more like a new piece of text and can read it more objectively. Get friends to read it and giv
you comments. If they cannot understand what its about, its time to rewrite it.