This project has been developed for the PP2 of Code Institute. It is a flag quiz game and it aims to entertain and educate people with the flags of all the countries.
View the deployed project here
- Design
- User Experience (UX)
- Features
- Technologies Used
- Deployment and Local Development
- Testing
- Credits
The colours were chosen to match the background's image colours.
Other colours used:
#000
#eee
rgb(1,136,188)
The Comfortaa font was chosen because of its rounded edges that make it easy to read.
The font imported from Google fonts
| Goal | ||
|---|---|---|
| Client | A simple and easy to understand how to play quiz | |
| A fun and educational quiz | ||
| First Time User | I want to know what is the quiz about | |
| I want to know how to play the quiz | ||
| I want to choose level of difficulty | ||
| I want to know to know if my answer was correct or wrong | ||
| I want to know the correct answer if I answered wrong | ||
| I want to know how how many questions played/left | ||
| I want to know my final score | ||
| I want to save my score | ||
| I want to find out who the author is | ||
| I want to connect on their social media | ||
| Returning User | I want to choose level of difficulty | |
| I want to choose different levels of dificculty such as speed round |
||
| I want to choose different level of questions such as flags per continent |
||
| Frequent User | I want to choose different type of questions such as find the capital of the country |
|
| I want to choose different type of questions such as find the country on the map |
||
| I want to save my score and compare it against other people's score |
On all pages there is a header with the title of the quiz and a footer with GitHub and social links.
The home page displays a container with a welcome message and how to play text and 2 buttons, Play and Highscores.
When the Play button clicked displays the choose level page.
When the Highscores button clicked displays the highscores page.
The choose level page displays a container with a choose level message and 5 buttons. 4 buttons to choose number of flags (10, 25, 50, All) and the Go Back button that redirects to the home page.
The game page displays a container which holds a flag image as question, a timer of 10 seconds, 4 answer buttons, a question counter on the bottom left and a correct answer counter on the bottom right.
When the user chooses the level(number of questions) the game page will be displayed with a question and the timer will start counting down.
The user has to select one of the answers, if correct the background of the button will become green and the modal will be displayed with a congratulations message. If the answer is wrong the button's background colour will become red and the modal will be displayed with a message with the correct answer.
When last question has been answered the end page will be displayed.
The end page displays a container with the final score, a text input for the user to enter their username, a Save button and a Go Home button.
The save button is disabled until the user type in the input. Once typed becomes active and when clicked it saves the score and redirects to the home page.
The Go Home button redirects to the home page.
The highscores page dislays a container with a table of the top 5 highscores and a Go Home button that redirects to the home page.
The error page displays an error message and a button that redirects to the home page
HTML, CSS, JS
- GitHub - To save and store files for the website.
- GitPod - IDE used to create the site.
- Techsini - To show the web image in various devices.
- Google Fonts - To import the fonts used on the website
- Google Developer Tools - To test features, resposiveness and stylilng.
- TinyPNG - To reduce size of the images.
- Favicon - To create favicon.
- Shields IO - To add badges to README.
- Coolors - To create colours palette.
- VSCode - Code editor used for local development.
- GetFireShot - To capture screeshots for testing images.
- Obsidian - To keep notes.
- Font Awsome - To create icons
The site is deployed using GitHub Pages. Deployed site Geography Is Cool!!
To deploy the site to GitHub Pages :
- Log in (sign up) to GitHub.
- Go to the repositoty for this project Geography Is Cool!!.
- Go to settings.
- Select Pages from the left hand menu.
- From the dropdown menu at source select the main branch and press save.
- The site has been deployed. Check at the top of the page, it might take a couple of minutes.
To fork the repository :
- Log in (sign up) to GitHub.
- Go to the repository for this project Geography Is Cool!!.
- Click the fork button in the top right corner.
To clone the repository :
- Log in (sign up) to GitHub.
- Go to the repository for this project Geography Is Cool!!.
- Click on the code button, select one of the HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
Please see Testing
The title's name borrowed from the Facebook page Η γεωγραφία είναι πολύ κουλ
Countries array and flag .png images borrowed from hampusborgos repository on GitHub. I edited the JSON file and converted it to .js file.
Flag .svg images borrowed from lipis repository on GitHub.
To build the project I followed the Code Geek tutorial on youtube.
I used W3Schools and stackoverflow for varius enquiries I had through the proccess of building the quiz.
Background Image by macrovector on Freepik
404 page background Image by Vectonauta on Freepik
My mentor Brian Macharia for guidance, support and feedback during the project.
The tutors from Code Institute Martin, Holly, Ed and Sean for helping with the issues that I faced.
The Facebook page Η γεωγραφία είναι πολύ κουλ for letting me use their title and inspiring me to build this project.
The people on slack community that took some time to test the quiz and give feedback.
My friends who were my beta testers!
And a massive thank you to my partner Vicky for the support and patience!