A document from MCS 275 Spring 2021, instructor Emily Dumas. You can also get the notebook file.

Quiz 13 Solutions

MCS 275 Spring 2021 - Emily Dumas

Solutions by Jennifer Vaccaro

Instructions:

Deadline

This quiz must be submitted in Gradescope by 12:00pm CST on Tuesday, April 20, 2021.

Topic

This quiz covers HTML, CSS, and the basics of the Python web framework Flask.

Allowed resources:

Quizzes are INDIVIDUAL, closed book, and only allow access to specified resources. For this quiz you can access:

Point distribution

There are two problems on this quiz, numbered 2 and 3. The point breakdown is:

Points Item
3 autograder
4 problem 2
4 problem 3
11 total

No problem 1 (as usual)

Problem 2: HTML squares report

Write a Python program quiz13prob2.py that takes a single command line argument, a positive integer n, and which generates a HTML file that has a title, a header (h1), and contains an unordered list of the first n perfect squares. It should save the output to a file called squares.html.

For example, running

python3 quiz13prob2.py 5

should create a file squares.html that when opened in a browser looks similar to the screenshot below.

Screenshot of squares HTML

Due to differences between browsers, a correct HTML file may look slightly different from this screenshot. (You don't need to use any CSS to achieve a more precise match.)

Also, browsers are often willing to render invalid HTML, so loading your HTML in a browser is not a perfect test of its correctness. Be sure to manually inspect the contents and check that each opening tag has a corresponding closing tag, for example.

In [ ]:
# MCS 275 Quiz 13 Problem 2
# J Vaccaro
# I completed this work myself in accordance with the syllabus.
"""Script creates an html document with a bulleted list of perfect squares."""

import sys

# Read in the number of squares from the command line
n=int(sys.argv[1])

# Define header/tail strings
HEAD = """<!doctype html>
<html>
<head>
<title>Squares</title>
</head> 
<body>
<h1>Squares</h1>
<ul>
"""
TAIL= """</ul>
</body>
</html>"""

# Open and write to the output file
fname= "squares.html"
with open(fname,"wt") as of:
    of.write(HEAD)

    # Add bullet points for each square
    for i in range(1,n+1):
        of.write("<li>{}</li>\n".format(i**2))
    of.write(TAIL)

Problem 3: Is it Friday yet?

Make a Flask application quiz13prob3.py that has a single route, /, which returns an HTML document whose body contains either

<h1 class="encouraging">Yes, it's Friday!</h1>

or

<h1 class="disappointing">No, it isn't Friday.</h1>

according to whether or not it is Friday at the time the request is served. Include an inline CSS stylesheet in the document header (in a <style> tag) which ensures that "Yes, it's Friday!" will always appear in large green text while "No, it isn't Friday." will always appear in small red text. The same stylesheet should be included no matter what day of week it is; you must use the class attributes of the h1 tags to ensure different syles are applied to the two possible messages.

Note: We haven't worked with Python's datetime module very much in MCS 275, though it is often covered in MCS 260. For the purposes of this problem, it should be enough to know the following way to get the current day of week:

In [7]:
import datetime

datetime.datetime.now().weekday()  # returns an integer, 0=Mon, 1=Tue ..., 4=Fri, 5=Sat, 6=Sun
Out[7]:
5
In [ ]:
# MCS 275 Quiz 13 Problem 3
# J Vaccaro
# I completed this work myself, in accordance with the syllabus.
"""Program launches a Flask app which displays whether it's Friday"""

import datetime
from flask import Flask

# Preset some strings
HEAD = """
<!doctype html>
<html>
<head>
<title>Friday check</title>
<style>
h1.encouraging {
    color: green;
    font-size: 50pt;
}
h1.disappointing {
    color: red;
    font-size: 10pt;
}
</style>
</head>
<body>
"""
FRI="""<h1 class="encouraging">Yes, it's Friday!</h1>
"""
NOTFRI= """<h1 class="disappointing">No, it isn't Friday.</h1>
"""
TAIL= """</body>
</html>
"""

# Create the Flask app
app =Flask(__name__)

# Add a route to "/"
@app.route("/")
def friday_check():
    """Returns an html webpage displaying whether today is Friday"""
    # Check whether today is Friday, then return the appropriate html.
    if datetime.datetime.now().weekday()==4: # Must run the check every refresh!
        return HEAD + FRI + TAIL
    else:
        return HEAD + NOTFRI + TAIL

# Run the app, by default at address 127.0.0.1:5000/
app.run()