COURSEWORK 3
COMP1011: Programming for the Web
Page 1 of 4
You should follow the instructions in naming the files/functions, otherwise you will lose marks.
You are only allowed to import the csv and matplotlib modules in this coursework,
other modules are NOT ALLOWED. Please download the all_files.zip or individual files as
required.
Standard university penalty of 5% of available marks per day, or part of a day, will apply to
late work. Late submissions are acceptable up to 7 days late.
Submission: You must submit your work via Gradescope.
Deadline: 1000 GMT 13/12/21.
Weighting: This coursework is worth 40% of the module grade.
1. Create a diabetes.py module (30 marks)
Create a module called diabetes.py. In the module, create a function called
generate_summary_for_web(csvfile, html_title, html_filename,
show_barchart_gender=True) that reads specific csv files related to diabetes.
These csv files will have the same column header, same number of columns, and in the
same order. All columns in the csv files are attributes except the last column which is the
class, either Positive of Negative.
The csvfile is the full name with extension of the csv file to be used (e.g.,
“diabetes_data.csv”). The html_title is a string for the title (
html file specified by html_filename (e.g., “summary.html”). You can also use the
same html_title as the
heading at the beginning of the html page.
When this function is called with relevant parameters, the following will be produced:
1.1. An html file with the specified html_filename and html_title, with an html
table on the total count for each value (Yes or No) of the attributes (except Age and
Gender) according to each class similar to the table in Figure 1. (20 marks)
Figure 1: HTML table with total count on each value for attributes according to the class
COURSEWORK 3
COMP1011: Programming for the Web
Page 2 of 4
1.2. If the value for the parameter show_barchart_gender is True, then a vertical
bar chart (similar to the bar chart in Figure 2) showing the count for Positive and
Negative cases for each Gender will be shown after the html table. Hint: You
need to write codes (possibly in separate function) to plot the bar chart with pyplot
in matplotlib and save the plot to current directory (refer savefig() method in
pyplot), and display it on the html page. If the value for the parameter
show_barchart_gender is False, the bar chart will not be created and
displayed. (10 marks)
Figure 2: Bar chart on the gender of positive and negative cases
Please do not include codes to test the generate_summary_for_web() function in
your submission. However, you can do it on your own with diabetes_data.csv by
calling the function and passing in the arguments.
You can pass with a basic html table, bar chart and line plot as in Figure 1 and Figure 2
but you can gain higher marks if you add more sophisticated formatting/style/ to your
html table/bar chart.
COURSEWORK 3
COMP1011: Programming for the Web
Page 3 of 4
2. JavaScript (10 marks)
Modify the JavaScript functions in the lights_off.html file. When the html file is
opened in a browser, a grid of buttons is displayed with a button in the middle at position
(2,2) toggled.
The function toggle(i,j) switches the states of the button at position (i,j) between
the white “O” state (on) and the black “X” state (off).
Implement the following JavaScript functions:
press(i,j) – toggling the state of the button pressed at position (i,j) as well as
the state of buttons above, below, left and right of the button pressed as shown in
Figure 3. This function should also called the checkAllOff() function to
check if all buttons are in the off state. (3 marks)
(a) Pressing the centre button
at position (2,2)
(b) Then pressing the middle
button of the top row at
position (0,2) after (a)
Figure 3: Toggled buttons after button at position (2,2) is pressed and then followed by
button at position (0,2).
checkAllOff() – test whether all buttons are in the off state (i.e. black). If it
is, display a message “Congratulations! All lights out!” indicating
the puzzle has been solved (as shown in Figure 4) at html element with
id=”end”. This function should also remove the message if, following a
subsequent press, one or more buttons returns to the “on” state. (4 marks)
COURSEWORK 3
COMP1011: Programming for the Web
Page 4 of 4
Figure 4: All buttons in the off state.
resetGrid() – reset the grid to the initial state. This function is called when
the Reset button is clicked. This function should also remove the
congratulations message. (3 marks)
You can solve the puzzle by clicking the buttons indicated by “1” in the following grid.
0 0 0 0 0
1 1 1 1 1
1 0 0 0 1
1 1 1 1 1
0 0 0 0 0