Students meet Flask, where each address is a route joined to a function that returns the page as HTML, then add a results page, a visit counter and a small site of their own.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Predict and Run 10 min · Investigate 10 min · Modify 20 min · Make 10 min
Read the unit primer first. This course runs in the Python playground (real Python in the browser, Pyodide), where app.run() shows the site in an App tab with an address bar; links and forms in the page go back to the app. On a computer, pip install flask and python app.py serve the same file at http://127.0.0.1:5000. Before teaching it, open the site's Check your school page once on a student device at school. A route (@app.route("/about"), a decorator: the line with @ above a function) joins an address to a function; the function returns the page as HTML text. An address with no route gives the standard 404 Not Found. HTML inside Python strings uses single quotes for attributes (href='/about') so they do not end the string. The visit counter uses global (from the turtle course) and resets on every Run: variables last only while the program runs, which sets up saving in Lesson 4.
Understanding that the browser asks and the function answers. Ask students to say which function runs for each address before they click.
| What you will see | A question to ask | The fix |
|---|---|---|
| Not Found for a page they wrote. | Is there an @app.route line directly above the function, with the right address? | Add @app.route("/results") above def results():. |
| SyntaxError on a line of HTML. | Do the quotes inside the HTML match the quotes around the string? | Use single quotes inside: "<a href='/about'>About</a>". |
| UnboundLocalError: local variable 'visits' referenced before assignment. | Does home() say it is changing the variable outside it? | global visits as the first line of home(). |
One possible solution for each task. Other correct programs are fine.
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
page = "<h1>Chess club</h1>"
page = page + "<p>Lunchtime on Tuesdays, Room 12.</p>"
page = page + "<p><a href='/about'>About the club</a></p>"
page = page + "<p><a href='/results'>Results</a></p>"
return page
@app.route("/about")
def about():
return "<h1>About</h1><p>Everyone is welcome, from beginners to champions.</p><p><a href='/'>Home</a></p>"
@app.route("/results")
def results():
return "<h1>Results</h1><table><tr><th>Player</th><th>Wins</th></tr><tr><td>Ada</td><td>5</td></tr><tr><td>Sam</td><td>4</td></tr></table><p><a href='/'>Home</a></p>"
app.run()
from flask import Flask
app = Flask(__name__)
visits = 0
@app.route("/")
def home():
global visits
visits = visits + 1
page = "<h1>Chess club</h1>"
page = page + "<p>Lunchtime on Tuesdays, Room 12.</p>"
page = page + "<p><a href='/about'>About the club</a></p>"
page = page + "<p>This page has been visited " + str(visits) + " times.</p>"
return page
@app.route("/about")
def about():
return "<h1>About</h1><p>Everyone is welcome, from beginners to champions.</p><p><a href='/'>Home</a></p>"
app.run()
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "<h1>Robotics club</h1><p><a href='/times'>When we meet</a> · <a href='/robots'>Our robots</a></p>"
@app.route("/times")
def times():
return "<h1>When we meet</h1><ul><li>Monday lunchtime</li><li>Thursday after school</li></ul><p><a href='/'>Home</a></p>"
@app.route("/robots")
def robots():
return "<h1>Our robots</h1><ul><li>Cutebot</li><li>Line follower</li></ul><p><a href='/'>Home</a></p>"
app.run()
Stretch: Add a page at /time that shows a different message in the morning and the afternoon (import datetime; datetime.datetime.now().hour).
Support: Give students the results route with its table, and ask them only to add the link from the home page.
What is a route?
A link between an address in the site, such as /about, and the Python function that makes that page.
Next lesson builds pages from a list of data with a template. Later lessons take form answers, save them to a file and send data as JSON.