This website is aimed for people who want to play a quizgame as a diversion during their chilling time. The website is designed to be responsive and accessible on all devices; being at the same time simple but pleasant.
- Be able to easily navigate throughout the site to find content and contacts.
- Play the quiz game.
- Get my feedback regarding the score.
- Locate their social media links to see their followings on social media in order to be updated about their latest releases.
- Be able to manage my own posts and upload the profile image.
- Be able to play the game and navigate through the pages.
- Not to be allowed to remove any score (functionality only for admin).
- Check out my previous scores and therefore my progress.
- Find the best way to get in contact with the organisation with any question I may have.
- Find the social media links so that I can join and interact with others in the community.
- Be able to delete any users scores.
- Be able to edit any question.
- Have unique access to all features.
- Increase the number of people playing the games therefore the popularity of the website.
- Be in touch with the users.
- Make the website as accessible and responsive as possible.
- Gain a better understanding of the audience by checking their feedback both via the social networks.
- Use reviews to increase customer satisfaction.
The main goal of this website is to convert visitors into active users so that the website can get as popular as possible. All users will be able to play the game. Registered users will be able to see their previous scores, their progress in the game and upload a profile image. The website will show a bright palette as well as minimalistic but aesthetically pleasing imagery to invite users to play.
- Demographic:
- Anyone who wants to play a game online.
- No specific age or background.
- Whoever is interested in an educational style quiz.
The steps a new user would ideally take when landing onto the website are the following:
- Explore the websites landing page, where the information will explain the user the reason to be of the site.
- Create a new account.
- Explore the additional features available to registered users.
- Play their game and see the results posted on the main page.
- Upload a profile image.
- Log in/out to check the progress.
- Check out the links in the footer for feedbacks.
The website needs to enable the User to:
- Easy access the features of the website.
- Register and log in if further interested.
- Get in touch with the website owner and/or admin.
- Give feedback.
The website needs to enable the Website owner and/or admin to:
- Develop an online presence .
- Provide an easily navigable website for users.
- Improve the website thanks to the contacts.
- Use this website as a starting point for a bigger project.
This will all be achieved through creating a clear and strong UI focusing on well structured content. Having a clear hierarchy will allow the user to navigate and use the functionality of the website without the need of instructions. Simplicity and UX friendly functionality will be the strongholds of the whole project.
-
Features within the design plan with highest priority:
- Minimal but functional and appealing homepage .
- Navigation links clearly visible on the top of the website.
- Responsive navigation bar.
- Only allow registered users to create and manage their own accounts.
- Only allow registered users to check out their previous scores.
- Only allow registered users to upload their profile picture.
-
Lower priority features that may not be included in the initial release of the website:
- The ability for logged in users to search the website database.
- Search bar on the navigation bar so the users have fast access to their scores.
- Contact section to send an email to the Admin directly from the website.
- A full personalised profile page.
The information architecture was organized in a fluid and clear way in order to ensure that users could navigate through the site with ease and efficiency.
Wireframe mockups were created in Figma Workspace Click here for final wireframes. The mobile view is intentionally made disproportionate to show how the full page might look on a mobile screen. Several style changes were made in the final project compared to the inital wireframe on Figma. Those changes were mainly related to colours, font size, positioning on the page; all aimed at providing the best user experience and responsiveness.
The design of the website was created to be as simple and harmonious as possible, not to distract the user with too many color schemes and trying to bring the focus onto the game itself.
The colours used in this project are presented on a light background, to keep a minimalistic and tidy website, as well as keeping the color contrast the highest possible to facilitate the screen readers and make this site accessible to all. In addition to that there are also some brighter features thought specifically to draw the attention of the user to the main parts.
Please check out the colour Colour palette.
Colour palette
- The selected font for the whole project is Helvetica
- For this specific project imagery has been kept very minimalist in order to concentrate the work on the functionality of the app. Images have been selected from Unsplash.
- The favicon was created using Favicon.io and the logo used to create it was created using an online application called Freelogodesign. It represents a simple joystick with the "Quiz" word under.
Logo
-
The website is a data-centric one with html, javascript, css used with the bootstrap framework as a frontend.
-
The backend consists of Python, flask and jinja templates with a database of a mongodb open-source document-oriented database.
-
This model contains all fields stored in the database collections with their data type and mimics the structure of what is actually stored in the mongo database(mongodb). DbDiagram.io has been used for this purpose.
Each page of the website features a consistent responsive navigational system:
- The Header contains a conventionally placed logo at the top left of the page (clicking this will redirect users back to the home page) and navigation bar at the top right of the page. Hovering over the buttons in the navbar will trigger hover effect.
- User stories covered by this feature:
- 1 - Be able to easily navigate throughout the site to find content and contacts.
- 2 - Play the quiz game.
- 16 - Make the website as accessible and responsive as possible.
Header
- On smaller screens, the two main buttons (Play and Login) reduce their size in a responsive way and self position at the top right next to the registration one.
- User stories covered by this feature:
- 1 - Be able to easily navigate throughout the site to find content and contacts.
- 6 - Be able to play the game and navigate through the pages.
- 16 - Make the website as accessible and responsive as possible..
Navbar on small devices
- The Footer contains the appropriate social media icons, linking users to the main social media pages of the Quiz Game.
- User stories covered by this feature:
- 1 - Be able to easily navigate throughout the site to find content and contacts.
- 4 - Locate their social media links to see their followings on social media in order to be updated about their latest releases.
- 9 - Find the best way to get in contact with the organisation with any question I may have.
- 10 - Find the social media links so that I can join and interact with others in the community.
- 14 - Increase the number of people playing the games therefore the popularity of the website.
- 15 - Be in touch with the users.
- 17 - Gain a better understanding of the audience by checking their feedback both via the social networks.
- 18 - Use reviews to increase customer satisfaction.
Footer
- In the footer, there is a Mailto embedded in the email. Hovering over the email will trigger hover effect.
- User stories covered by this feature:
- 9 - Find the best way to get in contact with the organisation with any question I may have.
- 15 - Be in touch with the users.
Mailto
- Back to the top button - This button ⬆️ is present in the footer so that the user can comfortably click them to be redirected to the top of the page. This feature improves the quality of navigation, especially if using smartphones.
- User stories covered by this feature:
- 1 - Be able to easily navigate throughout the site to find content and contacts.
- 16 - Make the website as accessible and responsive as possible.
Btn back to the top
- Home Page
- User stories covered by this feature:
- 1 - Be able to easily navigate throughout the site to find content and contacts.
- 2 - Play the quiz game.
- 4 - Locate their social media links to see their followings on social media in order to be updated about their latest releases.
- 6 - Be able to play the game and navigate through the pages.
- 9 - Find the best way to get in contact with the organisation with any question I may have.
- 10 - Find the social media links so that I can join and interact with others in the community.
- 14 - Increase the number of people playing the games therefore the popularity of the website.
- 15 - Be in touch with the users.
- 16 - Make the website as accessible and responsive as possible.
- 17 - Gain a better understanding of the audience by checking their feedback both via the social networks.
- 18 - Use reviews to increase customer satisfaction.
- The Home Page consists of the following elements:
- Page - Possibility to play quiz game as an anonymous user.
- Page - Possibility to log in and play the game as a registered user with more benefits.
Home
- Login page
- User stories covered by this feature:
- 1 - Be able to easily navigate throughout the site to find content and contacts.
- 2 - Play the quiz game.
- 5 - Be able to manage my own posts by editing and/or deleting them.
- 6 - Be able to play the game and navigate through the pages.
- 8 - Check out my previous scores and therefore my progress.
- 11 - Be able to delete any users scores.
- 12 - Be able to edit any users scores.
- 13 - Have unique access to all features.
- 16 - Make the website as accessible and responsive as possible.
- The Login page consists of the following elements:
- Login - Allows registered users to log in and play.
- Anonymous user - Allows the user who does not want to register to keep playing anyway by clicking on the appropriate button. The ideal situation would be to have as many registered users as possible but it is always good to allow choice to those who do not want to register
- Registration - It opens the registration page.
Login
- Registration Page
- User stories covered by this feature:
- 5 - Be able to manage my own posts by editing and/or deleting them.
- 6 - Be able to play the game and navigate through the pages.
- 7 - Not to be allowed to remove any other scores except mine.
- 8 - Check out my previous scores and therefore my progress.
- 16 - Make the website as accessible and responsive as possible.
- The Registration page consists of the following elements:
- Username - Put your username.
- Password - Create a password.
- Repeat Password - Repeat the password.
- Create Account - Click onto "Create Account".
Registration
- 404 Page
- User stories covered by this feature:
- 1 - Be able to easily navigate throughout the site to find content and contacts.
- 16 - Make the website as accessible and responsive as possible.
- The 404 page consists of the following elements:
- Line 1 - It shows that the user is on page 404.
- Line 2 - Standard line for a page 404, inviting the user to click on the links to go back to a page of the website.
404
- The option for users to delete their account from the database.
- A contact form built in to submit requests.
- The user will be able to choose among many subjects (maths, history, physics, chemistry etc) based on his/her inclination.
- The part where the logged in user uploads his/her image can be further developed into a proper profile page.
-
- Figma was used to create the [wireframes](put link to wireframes) during the design process.
-
- Used to include icons.
-
- Used to import the three fonts used throughout the site xxxxxxxx.
-
- Used to host the entire repository for the project.
-
- The code editor used to build the entire project.
-
- Used this to compress the images used on the website to make files smaller.
-
- Used to generate the websites favicon logo of various sizes for different devices.
-
- Validator for HTML.
-
- Validator for CSS.
-
- This is a tool used to detect errors or potential problems within Javascript code, used to test and validate all Javascript written for this project.
-
- Pylint is a source-code, bug and quality checker for the Python programming language.
-
- PyMongo is the official MongoDB Python driver for MongoDB.
-
- Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries.
- Flask requires the Jinja template to work.
-
- Flask-PyMongo bridges Flask and PyMongo and provides some convenience helpers.
-
- Heroku is a cloud platform as a service (PaaS) supporting several programming languages.
- The Heroku network runs the customer's apps in virtual containers which execute on a reliable runtime environment.
-
- Test the functionality and appearance of the project on all main browsers.
-
- Jinja is a web template engine for the Python programming language. It allows writing code similar to Python syntax. Then the template is passed data to render the final document.
- Jinja templating is built into the Flask library.
-
- To check demos and explanations.
-
- To find answers to most common problems.
-
- For cross-browser testing among the major browsers.
Testing information can be found in a separate testing ℹ️ file
Mongodb is the database used in the application:
- Create an account at mongodb.
- Create a database cluster.
- Select the cluster, and in the collections section create a database and create the necessary collections under the database:
- In the database access, create a user and allow the user read/write access.
- In the network access tab, allow network access from the ip-address of the application connecting to the database.
- In the Databases section click Connect, and select connect your application.
- Note the MONGO_URI, MONGO_DBNAME and user, these parameters are used when deploying locally(env.py file) and deploying on the likes of heroku(config vars).
To deploy this application to Heroku, run the following steps.
- In the app.py file, ensure that debug is not enabled, i.e. set to True.
- Create a file called ProcFile in the root directory, and add the line
web: python app.pyif the file does not already exist. - Create a requirements.txt file by running the command
pip freeze > requirements.txtin your terminal if the file doesn't already exist. - Both the ProcFile and requirements.txt files should be added to your git repo in the root directory.
- Create an account on heroku.com.
- Create a new application and give it a unique name.
- In the application dashboard, navigate to the deploy section and connect your application to your git repo, by selecting your repo.
- Select the branch for example master and enable automatic deploys if desired. Otherwise, a deployment will be manual.
- The next step is to set the config variables in the Settings section.
- Set key/value pairs for the following keys: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, IP, MONGO_DBNAME, MONGO_URI, PORT, SECRET_KEY.
- Go to the dashboard and trigger a deployment.
- This will trigger a deployment, once the deployment has been successful click on the "Open App" link to open the app.
- If you encounter any issues accessing the build logs is a good way to troubleshoot the issue.
- Create an account at aws.amazon.com
- Open the IAM application and create a new user.
- Set the Amazon S3 for the user and note the users AWS ACCESS and SECRET keys.
- Open the S3 application and create a new bucket. For the purpose of this application the bucket name is myquizgame.
- Consult the AWS documentation to set it up according to your needs.
- The s3 bucket is now updated to be accessed by your application.
- In the app.py route update the variables s3_bucket_name and s3_bucket_url with the correct information that you have set up, for example:
s3_bucket_name = "myquizgame"s3_bucket_url = "https://myquizgame.s3.eu-west-1.amazonaws.com/"
To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- At the top of the repository, select Settings from the menu items.
- Scroll down the Settings page to the "GitHub Pages" section.
- Under "Source" click the drop-down menu labelled "None" and select "Master Branch".
- Upon selection, the page will automatically refresh meaning that the website is now deployed.
- Scroll back down to the "GitHub Pages" section to retrieve the deployed link.
- At the time of submitting this Milestone project, the Development Branch and Master Branch are identical.
By forking the GitHub Repository a copy of the original repository is made on the GitHub account. To view and/or to make changes without affecting the original repository:
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- At the top of the repository, on the right side of the page, select "Fork".
- You should now have a copy of the original repository in your GitHub account.
How to run this project locally:
- Install the GitPod Browser Extension for Chrome.
- After installation, restart the browser.
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- Click the green "GitPod" button in the top right corner of the repository. This will trigger a new gitPod workspace to be created from the code in github where you can work locally. Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process
- Stack Overflow for guidance
- Psychological properties of text colour in the README.md was found here
- Bootstrap for the Boostrap features.
- All the other Images were downloaded from Unsplash.
The developer consulted multiple sites in order to better understand the code that they were trying to implement. The following sites were used on a more regular basis:
- My mentor Mo Shami for continuous helpful feedback.
- Tutor support at Code Institute for their support.
- My family for opinions and feedback.