代写COMP1011程序、代做Python编程代写、Java，HTML程序语言代写

日期：2020-11-27 11:34

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 <H1> 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 <H1> heading [1 Mark]

Add code to the bill_sharing.html to display a <H1> 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.