Riddle-Me-This Game (Flask) part of submission for Fullstack web development course Code Institute
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
WireFrame
__pycache__
data
static
templates
.gitignore
Asking permission to use images.odt
Building the Project - Notes.md
Procfile
README.md
requirements.txt
run.py
test_run.py

README.md

Milestone Project 3 - Riddle-Me-This Game

Practical Python

  • Work in progress

Developer: Anthony Bonello


INDEX


INTRODUCTION

A Guessing Game

This is the milestone project for the “Practical Python” module, part of the New LMS in the “Full Stack Web Development Course” offered by Code Institute.

The purpose of the game is to guess a word or phrase from a given picture. Three attempts are allowed. With each subsequent attempt, further clues will be shown at the expense of reduced points.

What I plan to achieve? - An overview

The first decision I felt I have to make is wether to use a text-based or a picture-based riddle. I did a google search and I found some material that I can use as a picture-based riddle game. I also thought that a picture-based would be more attractive to a wide range of users of different ages. I decided to go down this route. See credits for these pictures.

Then I sketched a few layouts (pencil and paper) to get a general feel of how I would get the game to flow and an idea of layout of various parts. I sketched the logic of the game using a flow diagram.

The game will randomly select 10 riddles from a pool of riddles. The user will be presented with the first riddle. The user has to write the answer for the riddle and submit the answer by pressing a button. An option to pass is also provided.

A submitted answer will be checked against the stored answer and if correct a second riddle is presented. If the answer is wrong or if the user chooses to pass, a second attempt at answering will be offered. This time the user will be told how many words are expected in the answer. Similar submit and pass options are offered. If the answer is wrong or the user passes, a third attempt is offered. This time the user will be shown how many words should be in the answer and how many letters are in each word. After this final attempt the user will be directed to the next riddle, unless it is the final one, in which case the game will end and the user will be directed to the user page.

Points gained will be displayed on the user page and if they are high enough they will be added to the Hall of Fame.


UXD

The idea is to have a riddle game based on the idea of Pictionary.

Some menus will not be available before a user logs in, namely USER and CURRENT GAME. CURRENT GAME will only be available while a game is beign played. I plan to hide the menu for leading to the current view.

There are arguments against this. The argument goes that it will disorient the user by having the order changing. My argument is that the menu is going to change anyway since the unavailable menus will not be shown.

I think this is a small price to pay and the user should get used to it in a brief time. I do not think that it requires any appreciable learning curve. Some of the riddles are much tougher.

Strategy

The users of this site will be challenged with pictures which represent a word or a phrase and they have to guess this and gain as many points as possible to qualify to the Hall of Fame.

There are two halls of fame, one is for individual games, and the second for the overall points gained by the user. This will encourage the users to play more and raise their personal overall points gained.


People who might use the website would be looking for a mental challenge. Ages can vary but it does require a wide background knowledge of various topics and experiences.


What does it do?

Once a user registers and logs in, this game will select a random selection of 10 riddles from the current 30 riddles. The user will have to guess the word or phrase that the picture represents.

This game is competitive throught the employment of hall of fames.

It is targeted at users who like mental challenges.

Visitors have the ability to contact me by using a contact form.

How does it work

Playing the Game - Instructions

After logging in or registering you are taken to the user page. If you have navigated elsewhere you need to return to the user page. (Note the user page is not available in the navigation if you are not logged in.)

From the User page you can start a new game. Press the Play a game button.

An image is shown and your task is to guess the word or phrase that it represents. Type this in the space provided. Then click the Submit Answer button. If your guess is correct you will earn 10 points and will be moved to the next riddle.

If you have no clue of the answer, you can click on the Pass button.

Clicking the pass button, or if your first attempt was wrong will take you to the second attempt page.

Here you can see your previous answers for this riddle, and an indication of the number of words expected. Notice that the number of points for a successful guess has been reduced to 6. As previously, you can attempt a reply or pass.

Please note: the game has been coded in a way that it will accept the answer typed in a single input field. This has been done to facilitate typing.

If the answer is correct you will earn 6 points and the next riddle is presented. If your guess is wrong or you pass, you will be taken to the page for a third and final attempt.

This time round, apart from the number of words, you will be told how many letters are in each word. This is done at the expense of reduced number of points which, in case of a successful guess are reduced to 2 points.

If your guess is wrong or you pass, you will be taken to the next riddle. If it happens to be the last riddle in a game, then the game will be over and you will be taken to your User page. The points gained will be added to your scores and if you were good enough you might even make it to the Hall of Fame.

Each game has 10 riddles with a maximum of 100 points.

If you navigate away from the game, a new menu will appear that will allow you to return and continue the current game.

Scope

Features to implement

  • Game
  • Contact
  • Instructions in home page and About page
  • Hall of Fame:
    • Single game
    • Per user (all games played by user)

User stories

A person comes to this game to play:

  1. Case first time user, using available username:
    The user tries to register. The username is checked. It is available. The user is allowed to proceed with the registration process. On completion the user is logged in, taken to the user page and ready to start playing. See instructions.

  2. Case first time user, trying to use unavailable username:
    The user tries to register. The username used is found to be already in use. A message to this effect is shown to the user and asked to select another one. This continues until the user selects an available (not already in use) username. The user is allowed to proceed with the registration process. On completion the user is logged in, taken to the user page and ready to start playing. See instructions.

  3. Case returning user:
    The user types in the username and clicks on the login button. The user is taken to the user page where there will be displayed a list of games already played and a button allowing for starting a new game. For playing the game see instructions.

Structure

The data is held in json files. Databases can be used in later versions of the game.

There are 4 json files employed:

  1. users.json - An object of objects; this holds information about each registered user. Example:
    "user1": { "date_best_game": "27/07/2018", "games_played": [ [ "27/07/2018", 14 ] ], "number_of_games": 1, "points_best_game": 14, "total_user_points": 14, "username": "user1" }

    games_played stores the date of the game as well as the points gained for that game

  2. riddles.json - List of objects; this holds data about all the riddles available. 10 will be chosen at random for each game. The code will make sure that the same riddle is not selected multiple times. Example:
    {
    "id": 1, "source": "Obi-Wan-Kenobi.jpg", "answer": "Obi Wan Kenobi" }

  3. hof_individual.json - holds data about the best 10 games played. When new games are added, the code will sort the games and drop the 11th one.

  4. hof_all_games.json - holds data about the best overall performance by users. It holds the total points for that user and the number of games played. The code will drop any entries beyond 10.

Skeleton

  1. Home Page
  2. User Page
  3. Current Game Page
  4. Hall of Fame Page
  5. About Page
  6. Contact Page

Overall each page's structure includes:

  • a header containing:
    • a logo,
    • title,
    • logged in username (if any),
    • login/registration section,
    • navigation.
  • Body section:
    • This can be single column (all screen sizes), or
    • single column (for mobile / tablet) changing to two columns (for desktop).
  • Footer section:
    • Copyright notice,
    • social links.

Not all the pages will be available from the start as some will require the user to be logged in. The unavailable pages will not show up in the menu. Since the menu items were going to change in this way, I decided to hide the menu item that the user is currently visiting.

I had experiences using other websites where I click on a menu item and nothing seem to happen only to discover that I am actually already on that page. The reason for hiding the current page from the menu is to avoid this situation while keeping in line with how the navigation is already functioning.

  • wireframe - follow this link for further reading

Surface

The idea is to have a responsive, mobile first design.

Header at the top, body and footer.

The overall color scheme is monochrome based on a grey scale.

Some accent colors where chosen for CTA buttons.

Error messages are in red. Some are highlighted with yellow background to make them stand out.
Success messages are green.

LOGO The logo is only present in screens of landscape tablets and above.

I wanted to accentuate the game by doing an interactive logo. This was designed in inkscape as an svg image. But I decided to use a png version for implementation. The base color is brownish to match the general color of the riddle pictures.

The animation of the logo uses p5.js library. p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

I preload three images, one for the complete image - the logo at rest, one for the logo background missing the exclamation mark and its border, and a third one for a semi-transparent exclamation mark (no border). Using javascript, I switch the background image and handle the position of the floating exclamation mark to follow the mouse position.

By switching the images I achieve an effect as if there is a meniscus which reaches up around the exclamation mark creating a whitish border when it is at rest. As soon as the exclamation mark is lifted off its resting place and moves around this border is removed as if an item has been lifted out of a liquid surface.

The footer will be stacked in one column in mobile view and will get a two column layout for the tablet and desktop views.

Colors

The overall color scheme is a scale of grey.

  • Logo Color / Brand:

Main color for Logo: #d67b34

  • Text color: rgb(0, 0, 0)

  • footer <a> color:
    Social Icons have a touch of red that floods the icons on hover.

  • Error message color:
    red
    some errors are highlighted with background-color: #fde2eb;
    others are highlighted with background: yellow;

  • Success message color: Green accented with background-color: #dbffe4;

  • Button colors (complementary colors):

    • CTA Buttons : #f92fd6 with a hover of #d4ffae having a yellow shadow. When active the background changes to #b093f7 with a blue shadow and text color becomes #d4ffae. Notice the text in active state uses the same color as the hover shadow.

Typography

Fonts used are from google fonts. The main font is Averia Serif Libre with a fall-back to Cursive. The other font used is Gloria Hallelujah with a fall-back to Cursive for H1 header. And Bubblegum witha a fall-back to Cursive for H2 and H3 headers.

The font used for both the logo and the favicon is Savoye LET CC. Even the exclamation mark started with this font but then it was warped.

WIREFRAMES

A mockup wireframes for this game has been prepared using
Pencil Pencil Project. If you click on the buttons it will mimic the general flow of the game.

You can reach these here
Please note that a copy of the files for this wireframe are in this repository too at WireFrame/index.html

GAME LOGIC FLOW DIAGRAM

This is the flow diagram of the logic controlling the game. Logic Flow Diagram

FEATURES

Existing Features

If a user tries to login with a non existent username, that user will be directed to the registration page.

  • Game Logic - allows three attempts with each attempt giving more clues. registration and login
  • When registering, checking if username is not already in use
  • username - keeps track of all played games, points gained and date
  • keeps track of logged in users incase someone tries to log in from a different device
  • The navigation will automatically hide the link for the current page of for any links that are not available. Ex. If you are not logged in, you cannot access the user page.
    Navigation appears as a button for mobiles and tablets, and as a menu in the header in larger views.
  • hall of fame - single game - all games
  • About page has instructions of how to play the game
  • contact form - enabled through flask_mail, enables users to get in touch.
    Upon sending, the message will be shown to the user. Validation of the form content is carried out including if the email lacks the top level domain.
  • Interactive logo built using p5.js.

Features Left to Implement

There are some layout issues with the menus on very small screens.

Known Limitations

Not using a password. Another person can use the same username that has already been registered.

When Heroku sleeps, it will erase all new registrations, games played and hall of fame entries and reverts back to the state of when the game was deployed.

TECHNOLOGIES USED

  • HTML5 - used to build the structure and the content of this project.
  • CSS3 - used for creating the specific and custom styling of the game.
  • jQuery v3.3.1 - simplifies accessing the DOM.
  • Bootstrap v3.3.7 - used for some of the styles (modified), as well as layout of the content.
  • Font Awesome v4.7.0 - used to display the GitHub and Linkedin Icons.
  • Google Fonts - Lobster and Roboto.
  • p5.js - controls interactivity of the logo image.
  • Python 3 - for back end.
  • Flask - Back end micro framework. Upgrade Flask to v1.0.2, git reported that the previous version 0.12.2 had a known security vulnerability.
  • jinja2 - for templating the various pages.
  • flask_mail - used to enable the contact form to send emails to me.
  • unit test - used to unit test the python functions.
  • json - to hold data.
  • SVG - This was used to build the logo image using Inskscape. From this png files (with transparent background for the !) where produced.
  • Compress JPEG - I use GIMP to manipulate images. Once I export them as jpg, I use Compress Jpeg to minify them. Usually, I can gain between 25% and 50% reduction in file size.

TESTING

Final check on desktop

I tested the various scrollings on desktop using Safari v8.0.8, Chrome v68.0.3440.106 and Firefox v62.0.

Manual testing using Chrome.

Example of testing steps:

  1. css link - set body background color to red. Pass (before it was white)

  2. script.js link - append hello world div using jQuery. Checked in Chrome. Pass
    Noticed that links for bootstrap (both css and js are not loading.)

  3. Changed links for bootstrap - now loading. Checked with Chrome.

  4. The contact form itself has no back end and will not submit anything. To indicate some activity I added jQuery code to display an alert when the contact form is submitted. This was tested. Pass

  5. Added validation code. Tested - Pass

  6. Added code that will hide the collapsed menu when an item is selected. Pass

Manual Testing - User Stories

  • A student / parent is looking for a music teacher:
    1. The user comes to the page
    2. Clicks on activites in the menu (or scrolls down manually to the activities section)
    3. Reaches the Music Tuition part
    4. Clicks on the Tell me more ... button (secondary CTA)
    5. Reads the content
    6. Press the get in touch button (primary CTA)
    7. Fills in the form and press the submit button

Test pass on desktop.


  • Testing the contact form
    Test reaching the contact form from various places. PASS with the exception that the CTA buttons will take the user to the submit button on mobile devices. This has now been fixed.
    1. Submitting empty form: Error message shown to user prompting to fill in the name
    2. User fills in only name and trying to submit: Error message shown prompting user to fill in email
    3. User fills in first part of email only (Ex. asdf): Error message showing that the email lacks an @ symbol
    4. User adds @ symbol and tries to submit: Error message telling the user that the part following the @ symbol is missing
    5. User completes the name and email and leaves the rest of the form empty: Error message prompting the user to fill in a subject
    6. User fills in the name, email with correct format and subject and tries to submit: Error message prompting user to write a text message
      Following this typing less than 3 letters, an error message prompts the user that the message should be at least three letters long. (This is an arbitrary number.)
    7. Trying to send a filled in form with a fictitious email that passes the format test (EX: asdf@asdfg.saf): Error modal saying that Send email failed.
      This is due to "Sender verify failed error" raised by the email server. This offers me some protection from receiving spam from people who try to mimic an email address.

Mobile / Tablet testing

Apart from using Chrome developer tools to test the layout and functionality of the page in mobile and tablet layouts, I also tested the site on my mobile phone and that of my friend. Both are android phones.

The site is responsive and everything seems to work well in chrome developer tools. However, when viewed on a real phone, I noticed that the parallax background is not working as intended. In these cases it gracefully degrades to a normal background that scrolls with the page.

I found that this is browser dependent. Google Chrome (Mobile v68.03440.91) does not display the parallax background as intended, but Firefox (Mobile v61.0.2) does. I googled for any possible solutions but none of the suggestions work.

FIXED: I also noticed that the CTA button on mobiles will direct the user to the submit button of the form. The user will have to scroll back up. (This functionality works well on desktop.)

Unit testing Code for Form Validation

I refactored the code related to the form validation and used Jasmine (v2.4.1) to unit test the functions. I noticed that I could not unit test the code straight in the javascript file I was using due to the code being in a $(document).ready function. For this reason I copied the code to a separate file for testing, copying back any changes I make.

The code beign tested, the spec code and the html which runs the unit tests are in this folder. I am also including a zip of the version of jasmine I used. If you would like to run the unit tests, you will need to unzip this in addition to the files I made.

Note: I had to add jQuery (v3.3.1) to the html file.

While doing the unit tests I did uncover two bugs. The first one allowed a user to send the form by just filling spaces for the name, subject and message, together with an email. The second one allowed a user to ignore the error messages and still try to send the form. More on these two bugs below, in the BUGS section.

BUGS

As mentioned in the testing section above, when the CTA button is clicked in mobile devices the user is taken to the submit button instead of the top of the contact form. I tried to look into this but I cannot find a way to improve on this at the moment. I consider this bug as high priority to fix.

FIXED

This bug is now fixed. It took me about 8hrs of work and testing but it was worth going through the process. All I had to do is to get the height of the extended info section that will be set to 0px on closing, and take that amount in consideration when scrolling to the top of the contact form. The complexity arises from the fact that I used the CTA buttons in two other places, outside of the extended info. These are not meant to collapse. I solved this by separating the actions in different functions, something that I should have done from the start. NOTE: The reason why I want to reduce the height of the extended section to 0px is a visual one. I want to animate this in order to avoid a sudden jump that would otherwise happen. This is in keeping with the overall feel of the site that all movements are done smoothly.

Tested manually on google chrome and my mobile (Android) and it works well.


Cleaning and validating code

There are a number of warnings for the iframes realted to the code from soundcloud. The validator complains about width beign set to 100%. I tried removing this and the iframe will only occupy half the width I want. With width="100%" it works and fills all the space available.
There is an Error saying that | is an illegal character. This is found in code copied from google fonts. I am leaving this as is. There are errors saying: "The element button must not appear as a descendant of the a element". These are properly nested and work well as they are and they ensure that no matter where the user clicks on the button it will elicit a response.

It complains about vendor prefixes in code that comes from colorzilla (re background gradient) or was added by form validator. I am goind to leave these as they are.
There is also another warning about two classes having the same background and border colors. I will keep these as they are.

* **Form Validator** -  https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

* **JavaScript** - http://esprima.org/demo/validate.html
>Code is syntactically valid.

Note: Linter complains that there are 2 undefined variables, namely $ and emailjs. These are defined in imported files, jquery-3.3.1.min.js and email.min.js respectively.

DEPLOYMENT

The repository of this project is at github repository,
and it is deployed on Heroku here.

NEED TO ADD NOTE ABOUT HOW TO DEPLOY - Check with NISHANT

Version Control and Deployment

This is the github repository, and this project is deployed on Heroku here.

I am basing this project on an earlier exploratory exercise that I did. This previous exercise was meant to be a draft to practice the techniques and skills I need for this project. It can be found here. Another project that I built to learn the techniques I need is an addition game. The code can be found here.

The main change I did from my earlier riddle game project is to base the current one on OOP. In this way I can have multiple users logged in without interfering with each other. This is what I learnt from the addition game.

CREDITS

Code from other sources

I am linking to bootstrap cdn as well as using p5 code which is stored in its own file, static/vendor/p5.min.js

IMAGES

Logo:
The image and design of the logo is my work.

Favicon:
The image and design of the favicon is my work.

Riddle Images:
These are the work of Marcus Connor of Brainless Tales who gave me permission to use theses images for these games. I am very grateful for this.

One can read more about Marcus' work in the About page of his website. You can also see the 9 years' worth of daily pictures as well as visit his store.

FONTS

Averia Serif Libre, Gloria Hallelujah and Bubblegum fonts from google fonts.

Adding handling for 404 and 500 errors.


==========================

Security

A note about security
For this project I do not need high security. For better security the secret_key should be completely random to make it very difficult to guess. Ideally use a random key generator. The key should be placed in a separate configuration file which would then be imported. I do not consider security to be an issue for this particular project considering the purpose.

For better security I would also implement a password that would be salted and hashed. Only the hash would then be stored. Again I am not doing this for this project.

Overview

Getting information about heroku deployment

$ heroku apps:info riddlegame-ab
=== riddlegame-ab
Auto Cert Mgmt: false
Dynos:          web: 1
Git URL:        https://git.heroku.com/riddlegame-ab.git
Owner:          connect@anthonybonello.co.uk
Region:         eu
Repo Size:      10 MB
Slug Size:      55 MB
Stack:          heroku-18
Web URL:        https://riddlegame-ab.herokuapp.com/
Anthonys-MacBook-Pro:project_3 anthonybonello$