The purpose of this coursework is to help you learn about using Javascript, the DOM and jQuery to process JSON data. The coursework will be assessed and counts 10% of the final mark for this module.
The JSON data you will be working with represents the winners and runners-up of
each of the four Grand Slam tennis tournaments played each year.
Specifically, you will use the data for the men's and
women's tournaments, which are stored in
mens-grand-slam-winners.json
and
womens-grand-slam-winners.json
,
respectively.
For each result (represented by elements of the "result"
array),
the file contains information about the year ("year"
key)
in which the tournament took place, the name of the tournament ("tournament"
key),
which is one of Australian Open, French Open, Wimbledon or U.S. Open,
and the players who were the winner ("winner"
key) and
runner-up ("runner-up"
key).
You will need to download these files to the machine (web server)
where you develop and test your solution.
The product of the coursework should be an HTML page which a user can use to query information about the results of tournaments. In other words, the HTML page should allow the user to select which results they are interested in (i.e., to choose one of the two files mentioned above), and then provide an interface through which the user can query the data. The results should be displayed on the same page. You should use JavaScript, jQuery and HTML forms to implement your solution, which should work with both Firefox and Chrome. The techniques you need to use are covered in Client-side processing. Extra information is given below.
The components of the task are as follows:
Year | Tournament | Winner | Runner-up |
---|---|---|---|
2020 | Australian Open | Sofia Kenin | Garbine Muguruza |
2019 | U.S. Open | Bianca Andreescu | Serena Williams |
select
drop-down list for this (HTML checkboxes
seem appropriate but the values chosen are not made available to the client program).
By default, the "either" option should be selected, so that tournaments where the player
was either the winner or the runner-up are returned.
select
drop-down list. The options
should be "Australian Open", "French Open", "Wimbledon", "U.S. Open" and "Any".
By default, "Any" should be selected, so that all tournaments are returned.
The user should be able to make selections from any combination of items (2) to (6) above, so, for example, to ask for all the times that Roger Federer won Wimbledon since 2010.
I would recommend developing your solution in stages. This is particularly important since debugging Javascript can be very time-consuming and frustrating. All browsers do now provide a "developer console" or something similar which you can use to view error messages, set breakpoints allowing you to view the values of variables, and so on.
Start by simply trying to read one of the JSON files and outputting a single value. Then develop a solution which will output all the results for one of the tournaments. This can then be modified to add the functionality for choosing a file and then gradually adding all the conditions to be checked. At each stage add only small amounts of code before retesting your solution.
The deadline for submission is 6pm on Tuesday 17th March 2020. Please submit the coursework via Moodle as a single zip file containing a single HTML file, along with any separate Javascript files you use. You should not submit any instructions or explanations in a separate file. Instead, the interface should be self explanatory and the code should be commented appropriately.
Remember that plagiarism is taken very seriously by the Department and the College (see the relevant section in your programme booklet). Consequently, when you submit via Moodle, you are implicitly making the following declaration: I confirm that this coursework submission is entirely my own work, except where explicitly stated otherwise. (You are welcome to reuse code presented during lectures without acknowledgement, but any other code that is not yours should be acknowledged.) Your solution may be submitted to an online plagiarism detection service. The College's disciplinary procedure will be invoked in any cases of suspected plagiarism.
The College policy with regard to late submission of coursework is described in the MSc/MRes programme booklet. No extensions will be granted. The cut-off date for submissions is 6pm on Tuesday 24th March 2020. Submissions after this date will not be marked. Those submitted after 6pm on the 17th and before 6pm on the 24th March, where mitigating circumstances are not accepted, will receive a maximum mark of 50%.
Your program should be properly structured and should include comments and some simple error checking. The user interface does not need to be elaborate, but it should be clear to a user how to use it.
Marks will be awarded out of 20. The areas in which marks will be awarded and the maximum mark possible in each case are as follows:
friendliness of the user interface | 2 |
code structure and documentation | 2 |
error handling in the code | 2 |
part 1 | 2 |
part 2 | 3 |
part 3 | 3 |
part 4 | 2 |
part 5 | 2 |
part 6 | 2 |
Comments on your coursework, along with the mark you were awarded, should be returned to you within 4 weeks of the cut-off date.
<div id="resultArea"> </div>and then append a document fragment to this
div
element
or use the innerHTML
property. Of course, you may want
to use an element other than div
in your solution.<input type="button" ... >or
<button type="button" ... >Leaving out
type="button"
on the latter will cause the button to be
treated as a submit button and will clear any data entered in text boxes.
+
is used for string concatenation.===
; to test
whether two values are unequal, use !==
; to test
whether both of a pair of conditions is true, use
&&
; to test whether either of a pair of
conditions is true, use ||
.indexOf(.)
method of Javascript. For example,
myString.indexOf(mySubstring)
returns the starting index
where mySubstring
occurs in myString
(starting from index 0), or returns -1 if mySubstring
does not occur in myString
.$.each
function
to iterate over an array, you should be aware that the callback function
is passed an array index and a corresponding array value each time.
By contrast, the example used on
slide 32
iterates over an object.
value.runner-up
)
because it would be interpreted as an arithmetic expression. Instead, you have
to use the "associative array" method of accessing key values
(e.g., value["runner-up"]
).
The links on the Links to more information page might also be useful.