CSC104 2021 Assignment 3
Due: April 5, 2021 at 23:59 EST
Late policy: 1 hour grace period, following by automatic deduction of 5% per hour
Additional rules
• Do not add any other import statements
• Do not add code outside of your functions. Test your code using the interactive shell, the
MarkUs tester or by placing your code under if name == "__main__".
• Do not call print() or input()
• You may create additional functions.
Grading scheme
• Docstring examples - 10%
• Function correctness - 90%
MarkUs Autotester
Note that the MarkUs autotester for Assignment 3 checks for your docstring examples and that your
functions return the correct type, and runs a few simple correctness tests. The full function correctness
tests are not provided for you to run before the deadline, so you are responsible for thoroughly testing
your code. You are given unlimited tokens for running the checker for this assignment.
Provided Files
Download the starter code from MarkUs and extract the zip archive. The files are described below.
• a3_1.py, a3_2.py: The (2) files you will hand in. There are (7) functions for you to
complete in these files.
• bonus.txt which you may fill out to submit your website URL for bonus marks. If you are
submitting the bonus, do NOT change the filename.
• generate_webpage.py: The main program that will generate the webpages. This program will
NOT run until you complete both a3_1.py and a3_2.py. You do not need to understand all
the code in this file, but you should read through it and understand what the program is doing.
• hello-world.html, a simple HTML file. See Appendix A, the HTML crash course section for
a walkkthrough of this file.
• The rest of the files are described in the data and file structure section.
1
Background
We consume content on the World Wide Web (WWW) through dynamic serving up of files. The
most basic type of website is a text file with special formatting rules (just like the syntax rules of
Python) that the browser knows how to interpret as symbols and images on our screens. Behind the
scenes, the files we view on the internet are served up by web servers, which are highly connected
computers. Every time we load a webpage, we are establishing a connection with another computer
somewhere out in the world! (Doesn’t the thought make social isolation just a tad more bearable?).
Our internet service providers enable us to establish these connections.
This assignment explores the structure of HTML files (Hyper Text Markup Language). We will
programmatically create a structured website using Python. Python is commonly used to create
dynamic websites that can serve up different pages depending on user input or available data. We
will focus on transforming existing data into a human-friendly website.
At any point, you can see a live demo of what the outcome of this assignment should look like here.
Optional
Did you know that all UofT students are entitled to 50 MB of free web hosting? For an optional
5% bonus on this assignment, set up your A3 html files by following the instructions at
https://sites.utoronto.ca/ns/... . Note that since this is bonus, support will not be
prioritized at office hours/on Piazza for this.
Submit the completed file bonus.txt via MarkUs following the format giveb that includes the URL
to your webpage.
Data and File Structure
The data you will use for this assignment can be found under the data/ directory. All of the data
belongs to the New York Times Developer API. The data is provided as a supplemental educational
tool, and do not reflect any beliefs of the course instructors or the University of Toronto.
The data consists of the New York Time’s bestseller lists across list names found in data/names.txt.
Under data/lists/ are lists of bestsellers with information about the books on the list including
their author, ranking, and buy links. Each bestsellers file consists of headings on the first line,
followed by information about a number of books on the following lines. Given the nature of the
data, we are guaranteed that there will always be at least one line of book data in any given list file.
Make sure that you do NOT move any files or directories around! This will break the
assignment.
Your code will build up to creating this website
• One webpage as the “home page” of the site, that has all of the “list names”.
• One webpage per “list name” that displays the top bestsellers in that category.
The webpages will be generated under the html/ directory. You will notice the html/ directory
contains an include/ subdirectory - this stores a “home” icon home.svg (source), a website icon
favicon.ico, and a “stylesheet” styles.css that defines how our website will look. You will not
need to directly interact with the html/ directory, so you can ignore it if you like.
2
Tasks
Docstring examples are only required for functions in a3_1.py, and (2) docstring examples are
required for each function. No docstring examples are required for functions in a3_2.py. You are
required to write docstrings for functions in both a3_1.py and a3_2.py. Your docstring examples
must run and pass all tests when you run doctest.testmod() for full docstring example
marks.
Complete the function docstring, body, and (where applicable) doctests for the following (7) functions.
a3_1.py
format_html_list
format_html_table
format_html_fname
format_html_image
format_html_link
a3_2.py
get_all_names
generate_page
Function Descriptions
format_html_list(items, numbered)
• Input parameters
items is a List of str. numbered is a bool.
• Expected Output Returns a str. Returns an HTML list that is numbered or not numbered
depending on numbered. The return value is generated by doing the following:
(1) Wrap each element in items with the “li” tag.
(2) Join all the “li”-wrapped elements together
(3) Wrap the result of (2) in the “ol” tag if numbered is True, and “ul” otherwise.
For example:
items = ["banana bread", "apple pie", "cupcake"]
s = format_html_list(items, False)
s should be:
- banana bread
- apple pie
- cupcake
We will also accept any variation of s with or without additional newlines/whitespace
separating tags from each other, e.g. the following is also a valid value for s:
- banana bread
- apple pie
- cupcake
This is true of all the functions in this assignment. Any whitespace within the tags
should not be changed.
3
format_html_table(headings, rows)
Note: This is a difficult function to complete. If you get stuck on this, try completing the other
functions first.
• Input parameters headings is a List of str. rows is a List of List of str.
You are guaranteed that:
len(headings) >= 1
len(rows) >= 1
And that all sublists of rows have the same length, which is the same as the length of
headings.
• Expected Output Returns a str. Returns an HTML formatted table, with table headings
defined by headings and table rows defined by rows. The return value is generated by doing
the following:
(1) Wrap each heading in headings with the tag “th”.
(2) Join all the “th”-wrapped elements from (1) together.
(3) Wrap the result of (2) with the tag “tr”.
(4) Start from row 0 in rows, wrap each element of the row in the tag “td”.
(5) Join all the “td”-wrapped elements from (4) together.
(6) Wrap the result of (5) with the tag “tr”.
(7) Repeat steps (4-6) for each row.
(8) Join the strings from (3, 7) together.
(9) Wrap the result of (8) with the tag “table”.
Hint: the str.join() method is helpful here.
For example:
headings = ["Item", "Quantity", "Cost per unit", "Total cost"]
rows = [["banana", "5", "$0.30", "$1.50"],
["apple", "3", "$1.10", "$3.30"],
["onion", "1", "$0.59", "$0.59"],
["total", "", "", "$5.39"]]
s = format_html_table(headings, rows)
s should be:
Item | Quantity | Cost per unit | Total cost |
---|---|---|---|
banana | 5 | $0.30 | $3.30 |
apple | 3 | $1.10 | $3.30 |
onion | 1 | $0.59 | $0.59 |
total | $5.39 |
format_html_fname(name)
• Input parameters name is a str.
• Expected Output Returns a str. Returns the str referred to by name with ".html" added
to the end, for example:
format_html_fname("dog")
'dog.html'
format_html_image(src)
• Input parameters src is a str. src indicates the URL for an image.
• Expected Output Returns a str. Returns an HTML formatted image with the image located
at src. For example:
s = format_html_image("dog.png")
s should be:
Note that there should be no spaces between src, =, and the image url, and the
url should be flanked by double quotes.
format_html_link(text, url)
• Input parameters text is a str, url is a str.
• Expected Output Returns a str. Returns an HTML formatted hyperlink that reads as text
and links to url. For example:
5
s = format_html_link("lorem ipsum dolor", "google.ca")
s should be:
lorem ipsum dolor
Note that there should be no spaces between ‘href‘, ‘=‘, and the link url.
get_all_names(f_names)
• Input parameters f_names is a file open for reading. Each line of f_names has two (2)
tab-delimited values.
• Expected Output Returns a List of List of str. The structure of the returned list is
described below:
If names.txt is the following:
Book A \tbook-a
Book B\tbook-b
Where \t is the escape sequence for the tab character, then the following should be the
result of get_all_names.
f_names = open("names.txt")
get_all_names(f_names)
[["Book A", "book-a"], ["Book B", "book-b"]]
Where all leading and trailing whitespace from each list element is removed, but case
remains intact; i.e. do not change the original case from what is in the file. Do
not close f_names in this function.
generate_page(content, tags)
• Input parameters text is a List of objects. tags is a List of str.
You are guaranteed that:
len(content) == len(tags)
• Expected Output Returns a str. Where each element of content is formatted with the
corresponding element of tag, and joined together in the order they appear in the input
parameter lists. Note that elements of content may vary depending on the corresponding tag,
but they are guaranteed to correspond to the way format_html_tag() passes inputs to each
of the functions it calls. Additionally, tag may not necessarily be an HTML tag, but it will
either be an HTML tag or a format compatible with format_html_tag().
Hint: Call format_html_tag() from a3_1.py.
For example:
content = ["lorem", "ipsum.png"]
tags = ["p", "img"]
generate_page(content, tags)
"lorem
6
Submission Checklist
• Complete the required functions
• Test your functions locally using the shell, your docstring examples, and the build_webpage.py
program
• Run the checker on MarkUs
Appendix A: HTML crash course
You do not need to know anything about HTML to complete this assignment. You will only need
knowledge of strings, lists, and loops. If you are interested in HTML, a short summary is provided
here, and you can refer to https://www.w3schools.com/ as a further reference.
HTML is not considered to be a programming language because it does not do anything; it is only
a way to specify structure of a webpage. Thus, HTML is a markup language, i.e., a way to mark
structural elements on a webpage so that browsers know how to visually present them. At a basic
level, HTML files are text files.
The hello-world.html file contains a basic HTML webpage. You can open it in any text editor to
view its contents, and open it in any web browser to see how it looks as a webpage.
HTML is structured using tags that define what types of content are in the page. For example, in
hello-world.html:
This displays in the tab as a title.
this is a heading
hello world!
The following tags are used: head, to define the pre-amble of the webpage, title, to define what
appears as the tab title, body, to define the body of the webpage, h1 to define a top-level heading,
and p to define a paragraph. Each tag is written with surrounding triangle brackets, and and closing
tags have a forward slash before the tag name.
Academic Integrity
This is an individual assignment. Do NOT share your code with others, or reference code from other
sources.