The JSON document you will be working with is
nobel.json, which is a
JSON representation of information about the winners of the Nobel prize.
Each entry in the
prizes array consists of a
category, and an array of
Each entry in a
laureates array has a
surname and a
share (the reciprocal of the person's
share of the prize, so 2 means one half and 4 means one quarter), among other information.
Create a web page which will allow a user to query the data as follows:
categoryvalue (e.g. literature) and retrieve the corresponding prize winners.
yearvalue (e.g. 1991) as well as an operator (<, = or >) and retrieve the prize winners for the years specified.
sharevalue (e.g. 2) as well as an operator (<, = or >) and retrieve the prize winners whose share value is specified by the condition.
surnamevalue (e.g. Curie) and retrieve the corresponding prize winners.
You will need to use a form on the page you create. The form will contain
text boxes for user input, possibly drop-down lists for operator selection,
and a button to retrieve the corresponding results. A fancy interface is
not expected. You can separate the input
region from the output region on the page by using a
element to hold the output. The output should comprise an HTML table, with
column headers Year, Category, First name and Surname. The idea is that you should use
the user's query.
I would recommend developing your solution in stages. This is particularly
frustrating. All browsers 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.
Frequent use of
console.log in your code to output values of variables etc. helps.
Remember that plagiarism is taken very seriously by the Department and the College (see the relevant section in your programme booklet). Consequently, you are required to state the following in your HTML submission (either as a comment, or visible on the displayed page): I confirm that this coursework submission is entirely my own work, except where explicitly stated otherwise. (Of course, you are welcome to reuse code presented during lectures.) Your submission 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 27th March 2018. Submissions after this date will not be marked. Those submitted after 6pm on the 20th and before 6pm on the 27th 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 the 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|
Comments on your coursework, along with the mark you were awarded, should be returned to you within 4 weeks of the cut-off date.
If you use the XMLHttpRequest object to retrieve the JSON file (as used on slides 23 and 24), you should note that Firefox and Chrome have different requirements. Both work fine if you perform the retrieval over the Internet, e.g. if your HTML and XML files are in your DCS web space and you load the HTML file over the web. Firefox (and Safari) will also work if you load the file locally, i.e. you change to your web space folder and load the file by double-clicking on it. Chrome will return an error if you try to do this.
<div id="resultArea"> </div>and then use the
innerHTMLproperty to insert HTML into it
===; to test whether both of a pair of conditions is true, use
&&; to test whether either of a pair of conditions is true, use
+operator; so if
str1 + str2will produce
myString.indexOf(mySubstring)returns the starting index where
myString(starting from index 0), or returns -1 if
mySubstringdoes not occur in
The links on the Links to more information page might also be useful.