| Description | Use Flask and Jinja2 to create a dynamic web site. |
|---|---|
| Type | Hand-in assignment with oral explanation. |
| Duration | About 1 working day. |
| Progress points | 1.5 |
| Learning goals |
|
| Pair programming |
You are allowed (but not required) to work together with a fellow student, practicing pair programming.
|
Learning materials
Mock-ups
Lingo
|Play game
- snail
- trump
- times
- strap
- prick
Lingo
|View history
| train | failed |
| snake | 8 guesses! |
| plane | 14 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
.cssfile, 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.)
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_hintfunction 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.28 | 1.28 | 3.85 | 2.57 | 2.25 | -1.68 | 9.5 |
| Base grade. | 1.00 | 1.0 | |||||
| Σ | 1.28 | 1.28 | 3.85 | 2.57 | 2.25 | -0.68 | 10.5 |