Quiz - Milestone project 3 Code Institute

Summary:

The purpose of the project is to build a site where users, can play the quiz, tracked their scores and also where admin can easily modify data base, add and delete users and questions. This site allows users to play short general knowledge quiz.

The project has the following sections:

• Home page contains main image and navigation bar with access to quiz, login and register

• Login page contains username field, password filed and login button

• Register page contains fields: first name, last name, username, email, password confirm password and register button

• Quiz page contains quiz for play after user / admin has been logged in

• Settings page for changing user details and passwords

• Admin page, only accessible for Admin

UX stories:

Admin stories:

• As an admin I would like to manage a smoothly functioning game

• As an admin I would like to be able to add new questions

• As an admin I would like to add users and to delete them

User stories:

• As a user I would like to register and login easily and conveniently through a simple process

• As a user I would like to play quiz where I can test my general knowledge

• As a user I would like to track my previous score

Structure:

Wireframes:

• Home page

• Home page mobile

• Login page

• Login page mobile

• Register page

• Register page mobile

• Admin page

• Admin page mobile

Design and colors:

Fonts:

• I used Roboto from, from Google Fonts

Images:

• I downloaded Welcome image from WallpaperAccess

Colors:

Navbar:

• navbar-dark bg-dark (for the nav): #212529

Quiz: Completed:

• tag (icon): #9ABC66
• card box shadows (on questions overview and completed): #DEDEDE

Accounts: Login/Register:

• on card box shadow: #DEDEDE
• card button: rgb(104, 145, 162)

Bootstrap colors in use: Navbar:

• on login and register: btn-outline-light me-2 class is used

403 Error page:

• Go Back button (btn-danger class) #dc3545

Alert messages (flash messages):

• alert-danger #842029
• alert-success #0f5132

Quiz questions:

• Submit button (btn-primary class) #0d6efd

Quiz overview:

• Start new quiz button (btn-secondary class) #5c636
• Continue button (btn-secondar classy) #5c636

Design

• Home Page

• Login page

• Quiz page

• Register page

• Settings page

• Admin page

Technology Used:

• HTML5

• CSS3

• Bootstarp5

• Python

Tools Used:

• Visual code studio

• Git pod

• Github for repository hosting service

• Heroku to deploy web application

• MongoDB for database

• PEP8 online for validation of Python code

• W3C for HTML validation

• Jigsaw for CSS validation

• Moqups for wireframes

Deployment:

Project setup:

Github:

• Create a new repository on Git Hub using code institute`s template

• Change repository visibility

• Press green button to open project in git pod

• Create readme.md file and make initial commit

• Make regular commits after project change with quality description using commands: git add -A and git commit -m "message"

• Use git push command in terminal for code commits

MongoDB:

• Navigate to MongoDB

• Create account

• Create data base

Heroku:

• Navigate to Heroku

• Register account

• Press button New

• Select create a New App, enter the app name and select region

• Press Resource and connect with database

Deployment`s final steps:

• After registration of test users, change status of one of the users to admin

• Create quiz questions

Testing

Throughout the development of the project, I carried out testing. I used the Chrome Developer Tools consistently. The application structure and mobile-first layout was tested on Google Chrome, Firefox and Safari. The application was tested on the following smartphone devices: iPhone11, Google Pixel 3,

Functional testing:

• That all of the links are open smoothly

• That application is mobile responsive

• That user can get logged in

• That quiz can not be run before user is logged in

• That user needs to create account

• That user name and e-mail must be unique

• That user name and password length must be between 10 and 150 characters

• That e-mail must be in valid form

• That users and admin can change passwords and other account settings

• That admin can delete users

• That admin can delete, add and modify questions

• If someone write \admin\ in URL gets error message

• That user can continue with unfinished session

• That finished session is inaccessible for players

Testing examples:

Google Chrome:

• Home page
• Login page
• Register page
• Quiz page
• Settings page
• Admin page

Firefox:

• Home page
• Login page
• Register page
• Quiz page
• Settings page
• Admin page

Safari / mobile phone:

• Home page
• Login page
• Register page
• Quiz page
• Settings page
• Admin page

Validation tests:

HTML:

• Home page------test results

• Quiz page-----test result

• Quiz page, user logged-----test result

• Register page-----test result

• Login page-----test results

• Settings page, user logged-----test result

• Admin page, admin logged-----test result

Python:

• init.py-----test result

• admin.py-----test result

• db.py-----test result

• forms.py-----test result

• helpers.py-----test result

• models.py-----test result

• views.py-----test result

CSS:

• CSS/style.css-----test result

• CSS/home.css-----test result

• CSS/quiz/style)-----test result

• CSS/quiz/common/errors-----test result

• CSS/quiz/accounts/auth-----test result

• CSS/quiz/accounts/settings-----test result

Conclusion:

This project was built only for educational purpose and won`t be in commercial use