COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 1 of 11
In this coursework you will be writing Python functions as well as some JavaScript code to
perform various computations.
To create these functions you will use Spyder (or some other program editing software if you
prefer) to edit the template files given. The template files contain the names of the functions
you need to define. Do not change the name of the files or the names of functions in the file,
otherwise it will cause difficulty for marking your code and you will lose marks. However, you
can add more functions/import if needed. On top of correct program output, you are also
marked for coding style. Make sure you have ticked the Enable code style linting option on
Spyder for conformance to the PEP 8 convention. Your answer file should be submitted via
Minerva in a single zip file.
(a) – Reading data from CSV file and displaying it in HTML [7 Marks]
(b) – Reading data from CSV and displaying structured information [14 Marks]
(c) – Retrieve data from the web [9 Marks]
(d) – JavaScript [10 Marks] (Not required for COMP0011 (IFY) students)
The total mark for this coursework is 40 marks for COMP1011 students. For COMP0011
(IFY) students, who do not need to attempt part (d), the total mark is 30 marks. Of the total
mark, 6 marks are allocated for coding style conformance to PEP 8. The weighting of this
mark in relation your overall module grade will depend on the particular module you are
taking. Full details are on Minerva.
Questions
(a) Reading data from CSV file and displaying it in HTML [7 Marks]
Write a function create_html_display_data(title, csvfile, htmlfile) that
read a given CSV file (csvfile) and display the data in a table in an HTML file (htmlfile).
The title is for the title and the heading

of the html page. If the file is not found, print
“csv file not found”. Assume that the user always enter a valid CSV formatted file.
You are provided with the following files to help you with this task:
 Starting template file for your code:
display_data_html.py
 A useful example file that creates an HTML file that displays data in a table:
create_html_table.py
 A CSV file containing food hygiene website traffic data, on which to test your function:
o web-traffic-2018.csv
You are free to add other functions/import to be used by your code. For example, you may
refer and adapt the code from the function create_html_table_with_data(data) in
create_html_table.py. You may also refer to the module reading material "Writing
HTML using Python" for another example of creating a HTML file and reading data from a
CSV file.
The output for a basic solution when the function is tested with “web-trafffic-2018.csv” with
title “Food Hygiene Rating Website Traffic Data 2018” should look something like this:
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 2 of 11
You can pass this coursework with a basic solution but you can gain higher marks if you add
further decorations, more sophisticated formatting to your output. For example, you could get
your output to look something like the figure below with alternating background colour for
each row. In this example, the following list of colours is used.
HTML_COLORS = ['Green', 'Silver', 'Lime', 'Gray', 'Olive', 'White', 'Red', 'Blue', 'Purple', 'Teal',
'Fuchsia', 'Aqua']
You can also produce a more advanced version to look something like the figure below with
different background colour for different month of the year and centre justified text. In this
example, the following list of colours is used.
HTML_COLORS = ['Green', 'Silver', 'Lime', 'Gray', 'Olive', 'White', 'Red', 'Blue', 'Purple', 'Teal',
'Fuchsia', 'Aqua']
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 3 of 11
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 4 of 11
(b) Reading data from CSV and display structured information [14 marks]
Similar to part(a) in this coursework, write a function summarised_data_html(title,
csvfile, htmlfile) to read the data from a given CSV file and displaying data in a
HTML table; but this time you will need to process the data before displaying the
summarised information. If the file is not found, print “csv file not found”. Again, assume that
the user always enter a valid CSV formatted file.
You are provided with the following files to help you with this task:
 Starting template file for your code:
summarised_data_html.py
 A useful example file that creates an HTML file that displays summarised data in a
table:
process_summary_html.py
 A CSV file containing food hygiene website traffic data, on which to test your function
(same as for (a)):
o web-traffic-2018.csv
You are free to add other functions/import to be used by your code. For example, you may
refer and adapt the code from the functions in example file process_summary_html.py.
You need to modify and extend summarised_data_html(title, csvfile,
htmlfile) so that the function creates a HTML file displaying the average value for each
month in the given CSV files. For example, the table below is the data for the month of
January 2018 in the file “web-traffic-2018.csv”.
Date Visits UniqueVisitors Pageviews
01/01/2018 10620 9575 45765
02/01/2018 8912 8061 42513
03/01/2018 9073 8074 42334
04/01/2018 9225 8290 46141
05/01/2018 14470 13253 74009
06/01/2018 14082 12765 66577
07/01/2018 9546 8724 43839
08/01/2018 11048 9991 45218
09/01/2018 8998 8043 42235
10/01/2018 9574 8630 43817
11/01/2018 8963 7858 43594
12/01/2018 10996 9795 53147
13/01/2018 10942 9923 48806
14/01/2018 8512 7773 39729
15/01/2018 7996 7008 41490
16/01/2018 9442 8370 45487
17/01/2018 8323 7412 40152
18/01/2018 8326 7431 40744
19/01/2018 10733 9530 51035
20/01/2018 11493 10359 52138
21/01/2018 10333 9446 49331
22/01/2018 10734 9640 52800
23/01/2018 9804 8813 49617
24/01/2018 9476 8363 49916
25/01/2018 9724 8651 48253
26/01/2018 12024 10816 57542
27/01/2018 12703 11467 60628
28/01/2018 11859 10671 54237
29/01/2018 18045 16283 96096
30/01/2018 14406 12880 70320
31/01/2018 11095 9821 51028
The sum value for the field Visits is 331477, UniqueVisitors is 297716, and Pageviews is
1588538. Therefore, the mean (average) value for the field Visits is (331477/31) =
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 5 of 11
10692.80645, UniqueVisitors is (297716/31) = 9603.741935, and Pageviews is (1588538/31)
= 51243.16129.
The output for a basic solution when the function is tested with “web-trafffic-2018.csv” with
title “2018 Food Hygiene Ratings Website Traffic (Mean)” should look something like this:
You can pass this coursework with a basic solution but you can gain higher marks if you add
further decorations, more sophisticated formatting to your output.
For example, you could get your output to look something like the figure below with
alternating background colour for each row.
You can also produce a more advanced version to look something like the figure below with
the highest mean value in bold (Nov 2018 for Visists, Nov 2018 for UniqueVisitors, and Nov
2018 for Pageviews) or in other formatting.
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 6 of 11
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 7 of 11
(c) Retrieve data from the Web [9 Marks]
For this question, you will retrieve data in CSV format from the web. Data stored on web
pages can be accessed in Python using the urllib module.
The New Zealand Government publishes online datasets on population, business, labour
market, society, economy, and environment. These datasets are licensed under the Creative
Common Attribution 4.0 International licence. For this question, you are going to use the
marine economy data from 2007 to 2018 from the URL:
https://www.stats.govt.nz/assets/Uploads/Environmental-economic-accounts/Environmentaleconomic-accounts-2020-tables/Download-data/marine-economy-2007-18.csv
You need to write code in the following functions in the given template file “query_web.py”:
1. display_detail_data(data) [5 Marks]
This function will take the marine economy data as its argument and display the details. A
sample function to retrieve data from the web called get_csv_data_from_url(url)
is provided in the template file query_web.py. You can use this function to retrieve the
data from the url and supply it to your function display_detail_data(data). Note
that the first row of the data returned by get_csv_data_from_url(url) is the header
of the columns.
For basic solution, you can simply loop over the data and display it as shown in figure below.
However, you can gain higher marks if you can format our output as shown below by
hardcoding the headers for each column.
You can also produce a more advanced version with column headers extracted from the first
row of the data. In this case, other online datasets such as renewable energy stock account
from 2007 to 2018 at
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 8 of 11
https://www.stats.govt.nz/assets/Uploads/Environmental-economic-accounts/Environmentaleconomic-accounts-2020-tables/Download-data/renewable-energy-stock-account-2007-
18.csv can also be displayed correctly.
2. display_GDP_data_year(data, year) [4 Marks]
The marine economy data contains the column headers: year, category, variable, units,
magnitude, source, data_value, and flag. This function will take 2 arguments: the retrieved
marine economy data, and the year. The function will return the value from data_value for
„GDP‟ in the column variable and the specified year. You can use the same
get_csv_data_from_url(url) function to retrieve the data from the url and pass it to
your function display_GDP_data_year(data, year). Assume the user always
enter valid data and year. If data for the year is not found, return “data not found”.
The marine economy data from 2007 to 2018 is assessable at the URL:
https://www.stats.govt.nz/assets/Uploads/Environmental-economic-accounts/Environmentaleconomic-accounts-2020-tables/Download-data/marine-economy-2007-18.csv
Example
year output
2008 564630
2012 839196
2018 1133460
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 9 of 11
(d) JavaScript [10 Marks]
For this question you will add code to a given file HTML (bill_sharing.html) and modify
the JavaScript function for bill sharing. The template file contains HTML and JavaScript code
to display input boxes, selection box, and text to display calculated amount to be paid by
each person as shown in figure below.
1. Add

heading [1 Mark]
Add code to the bill_sharing.html to display a

heading “Bill Sharing Calculator”
similar to figure below.
2. Add validations to function [6 Marks]
Modify the billSharing() function to include validations for input for bill amount, tips
amount, and the number of people to share the bill. If invalid data is entered, the following
alert() messages should appear.
Pressing the Calculate! button with invalid bill amount such as “” (empty) or non-numeric
value such „q‟ gives the following message. You can use JavaScript isNaN() function to
check whether a value is not a number.
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 10 of 11
Pressing the Calculate! button without selecting the tips amount gives the following message.
Pressing the Calculate! button with invalid number of people to share the bill such as “”
(empty) or non-numeric value such „q‟ gives the following message. You can use JavaScript
isNaN() function to check whether a value is not a number.
3. Add bill sharing calculation codes [3 Marks]
Further modify the billSharing() function to calculate the amount to be share between
the people involved. For example, if the user entered 100 for the bill amount, selected 20% -
Good, and 2 people to share, the page will display “Each person to pay £60.00” similar to the
figure shown. You can use toFixed() method tor round a number to specified number of
decimals. For example, vNum.toFixed(2) will convert the vNum to two decimal points.
COMP1011 COURSEWORK 3: HTML with Python and JavaScript
Page 11 of 11
Submission Instructions
You should submit via the submission widget on the Assessment page of the module's
Minerva pages. Your submission should be in the form of a zip file cw3.zip containing all files
for all questions. You can submit multiple times, only the last submission will be marked. You
submission will be marked after the submission deadline.
The deadline for submissions is 10 am on Thursday 10 December. The standard university
penalty of 5% of available marks per day will apply to late work.