DescriptionUse Flask and Jinja2 to create a dynamic web site.
TypeHand-in assignment with oral explanation.
DurationAbout 1 working day.
Progress points1.5
Learning goals
  • Create web apps using Flask and Jinja2. 100%
Pair programming You are allowed (but not required) to work together with a fellow student, practicing pair programming.
  1. Find a student who's also ready to do this assignment.
  2. Both of you start the assignment and fill in PAIR_PROGRAMMING.md.
  3. Do the assignment working together on one computer, alternating roles.
  4. Both of you submit at the same time, with only one uploading the actual code.
  5. We'll review and grade you together.

Learning materials

Mock-ups

Lingo

 |  Play game  |  View history

Play game

  1. snail
  2. trump
  3. times
  4. strap
  5. prick
"ploci" is not a word...

Lingo

 |  Play game  |  View history

View history

trainfailed
snake8 guesses!
plane14 guesses!

Hints

  • Start based on the provided Hello world. You should be able to run it using poetry install && poetry run flask run --reload.
  • When you update your .css file, just reloading your browser may not be enough to see the changes, as the browser may be caching the old version. Either hold shift while clicking the browser's reload button (forcing a complete cache refresh), or open the browser's development tools and tick Disable cache in the Network tab (you should keep the development tools open).

Technical requirements

Objective #1: Tools to useMUST

The functional requirements above should be implemented as a web site that...

  • Is based on Python and Flask.
  • Stores information server-side in Python (global) variables.
  • Is only meant to be used by one person at a time.
  • Uses only HTML rendered by the server. So no Javascript! (Just in case you happen to already know Javascript.)
Storing data in global variables is not something actual web apps do. It causes all data to disappear when you reload your application, and wouldn't work in case you want to scale to more than one web server process (in order to support more concurrent users). We'll be using a proper database from the next assignment onwards.

Objective #2: Templates1.2 points

Your site should use a (Jinja2) HTML template for each of the two pages. Both templates should extend a layout template, containing all HTML that is identical for both pages.

Objective #3: CSS1.2 points

Create a separate .css file, served statically and included from your layout template. It should cause your site to look decent, meaning that it is at least layed out consistently and with appropriate and meaningful margins.

Functional requirements

Objective #4: Play game3.8 points

Implement the Play game screen for Lingo, as shown in the mock-up above.

  • The player gets 15 guesses to guess a secret 5-letter English word, randomly chosen from a dictionary by the web server.
  • All earlier guesses are shown in a list. For each letter, the color indicates its status: red means that this letter does not occur in the secret word, orange means that this letter occurs in the word but not at this position, green means that this letter occurs in the word at this position. (The provided guess_to_hint function may be of help here.)
  • There is a text input and a button that allow the user to enter a new guess.
  • When the entered word is not in the dictionary, the site should refuse to process the input, and let the user know about this.
  • When the right word is entered, the same page as before should be shown (with the latest guess being all green), but instead of the guess text input form it should show:
    • A congratulatory message.
    • A New game button, that resets the game, selecting a new secret word.
  • After 15 wrong guesses, the result should be the same as explained in the previous bullet, except that the message should be sadder, of course.

Clicking View history should navigate to the other page.

Hint: Keep in mind that web programming requires a different way of thinking than the imperative Python programming we have done up until now. Instead of creating a loop in which we ask the user for input multiple times, we get incoming HTTP requests to which we must respond immediately and then return program control back to Flask. Some of the requests (the POST requests) should cause us to update the program state (for this one time stored in global variables), allowing us to keep track of things like earlier guesses.

Objective #5: View history2.5 points

Implement the View history screen for Lingo, as shown in the mock-up above. It lists all finished games, showing the the word together with the result (number of attempts or 'failed').

Clicking Play game should navigate to the other page.

Code quality

Objective #6+ 0.5 points- 1.6 points

Code quality with regard to reliability, readability, adaptability, maintainability, safety and/or performance should be high.

Rubrics mapping and grading

#2#3#4#5#6-Σ
Create web apps using Flask and Jinja2.1.281.283.852.572.25-1.689.5
Base grade.1.001.0
Σ1.281.283.852.572.25-0.6810.5