Coursework for Internet and Web Technologies module (2019/20)


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 task

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:

  1. Create a web page consisting of an HTML form with various form fields for user input, as well as an area for outputting results. The results should appear in a table on the same page. The table should have columns for year, tournament, winner and runner-up. So for the first two tournaments in the women's results, the table might look as follows:
    Year Tournament Winner Runner-up
    2020 Australian Open Sofia Kenin Garbine Muguruza
    2019 U.S. Open Bianca Andreescu Serena Williams
    There should be a button on the page which when clicked results in the table being filled with appropriate rows. When reloading the HTML page, the form fields should be cleared (reset).
  2. By means of a drop-down list, the user should be able to select which set of results (i.e., which file) they wish to query. If the querying button is clicked with no further restrictions being entered into the form by the user, then all the tournament results from the selected file should be returned in the table.
  3. The user should be able to enter the name of a player, as well as one of the conditions 'equals', 'contains' or 'none'. If 'equals' is selected, only the tournaments in which the player with exactly the given name was winner or runner-up should be returned. For 'contains', the value entered needs only to match a substring of the player's name. For example, the user may not remember that Murray's first name is "Andy", so can search using the string "Murray". The match should be case-sensitive in each case (so avoiding the need to transform the strings). For 'none', no restriction is placed on the player name, and any entry in the text box for the player name can be ignored by your script.
  4. For a player, the user should be able to select whether they are interested in finding results where the player was the winner, the runner-up or either. You should use an HTML 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.
  5. The user should be able to enter a value for the year (e.g. 2019) as well as one of the conditions 'equals', 'greater than' or 'less than'. So if the user enters 2019 for the year and 'equals' for the condition, only the results of the four Grand Slam tournaments for 2019 are returned.
  6. The user should be able to select which tournaments they are interested in. Using HTML checkboxes would once again have made sense for this, but are no use on the client, so use an HTML 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.

Handing in the coursework

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%.

Marking guide

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 interface2
code structure and documentation2
error handling in the code2
part 12
part 23
part 33
part 42
part 52
part 62
Full marks for the first 3 items above will not be awarded if only a partially working solution is submitted.

Comments on your coursework, along with the mark you were awarded, should be returned to you within 4 weeks of the cut-off date.

Hints and potentially useful information

The links on the Links to more information page might also be useful.