'Countries of South America' will test people's knowledge on countries of South America. In the game there are 12 points to collect, 12 countries in South America, and you will earn these points by getting the answers right. As soon as players start playing the game a quesition that relates to the answer/country will appear, they have to guess which country we are describing or asking them about. If they get the answer right, the player will earn a point and will be able to move on to the next question, the goal is to get as many points as you can. There will be a timer, this adds pressure to the game. If the timer runs out, the question will be answered automatically and users will not be able to select an option.

• In this page you have the title of the game in red, this will instantly give the user an idea of what the game is about. The'Play Game' will launch the game, laod the question and set the timer.
• Below there will be a 'Rules of The Game' button, if you press on this button a box with the rules will appear on the screen, this will contain the rules and explain to users how the game works, how to earn points and how to complete the game, and if they want, the rules will explain that they can also quit or restart the game.

• 

  Rules of the game on Desktop and Mobile screens

  

  ---

  Within the Game -

  ---

• In this area of the game, it will keep track of what question the user is on, there will be a timer that will make it feel like quiz, this will add more pressure to the game, it is going to be a 15 second timer, when the timer hits 0 the correct answer will be revealed, options will be disabled and user will have to move on to the next question.



• In this area there is going to be the question AND the options that users will be able to select from, users will have to read the question and guess which country they are being asked about or which country is being described.
• Users can hover over the question, the cursor will become a pointer on the options they can select, the color of he boxes will also change.



• After users select their answer, the options will be disabled and they can only select home, restart or the next question. Pointer will get disabled.
• If the user select the correct answer then their option will turn green, next button will appear



• This is the mobile verison of the game, when answer is correct it turns green, will act the same as on the laptop



• If users select the wrong answer then their answer will turn red, and the correct answer will appear green, the mobile version will also behave the same





• If user does not manage to beat the time then options will get disabled and correct answer will turn green, as you will be able to see, the timer is on 0 and the answer has been revealed



• In this part of the game there will be a Home button, a next question button and the Restart button.
• The home button feature will be there incase the user wants to quit the game or to look at the rules again
• The 'next' question button will only appear after the user has selected an answer, they won't be able to skip the question, this button will move on to the next question.
• The restart feature will restart the game from question one, this will not take the user to the home screen

Wireframes

---

So for my game my initial design was for it to guess the country by the flag, but as I got on with the project it was just difficult to have my idea blossom, I ran into so many obstacles with finding a way to implement the image when the question was called out at random from the array 'questions'.

So I went for a basic quiz question game.

But, even though it doesnt meet my inital wireframe design my game was still inspired by the wireframe, I still have the hidden Bolivian Flag, my game has a timer, instead of keeping track of the score my game keeps track of the question they are on. Unfortunatly I had to bin the 'hint' button, the sound toggling, and the highscore section.

But, I still have a home button, the next question button after user answers, and a restart button

• Fonts

The fonts that will be used for this project are 'Smooch Sans' and 'Fredoka'

Smooch Sans is going to be used for headings, and for areas where users are going to be looking at majority of the time. Fredoka will be used for the rest of the website, time counter, the results pop up box at the end.

• Colors

The main color for the game used was yellow (#DECC2A), the title will be in a red container and the 'Play Game' Button is in green container. The main page has a hidden flag within it and these are the colors of Bolivia.

Colors for timer are going to be opposite colors from the main color so that it stand out more, adds accessibility to users so that it does not blend into the background too much.

Colors for buttons will invert when user hovers over them, this will add interactivity and let users know that it is a button and that it can be pressed.

HTML5 - Provides the content and structure for the website.

CSS3 - Provides the styling for the website.

JavaScript - Provides the functionality of the website.

Google Chrome DevTools- Used to test responsiveness and debug

Github - Used to host and deploy the website.

ProtoPie - Used to create my wireframe

Favicon - Used to create the favicon.

Testing done on these search engines, website opened as it should and executed all questions and features without issues
• Chrome
• Safari
• Internet Explorer

To the deploy the project we are going to be using GitHub, to be able to launch the website we have to first...
1. Go to the GitHub repository and go on the project 'JavaScript-Portfolio-Project-2'
2. You will open this repository and select 'Settings' just above the green 'Gitpod' button
3. You will scroll down the 'GitHub Pages'
4. So for the website to be deployed online we have to select the 'Branch' on the 'Main' and set it to 'main', after this your project will turn green when ready to launch and will look like this...

• Font taken from Google Fonts
• Icons used from Font Awesome
• Favicon.io for generating the favicon I am currently using

Code
• Many inspirtaions from CI students, I took a look at everyones works, their ideas, their code on how they did what they did. It inspried me to make a quiz game and add some features like a timer or a question counter, these different ideas were inspired by looking at peoples work.
• Searching for different types of ideas on YouTube, StackOverflow gave me different ideas on how to write my code, how to get over obstacles.

I completed this game based of the Learning Objectives for my 2nd Project which is part of my Full Stack Development Course, I'd like to thank my mentor for the help through the project, giving me ideas, inspiring me to keep going and helping me better my code.

• I would like to implement a function where users can put there name down and the game will only let them play when that input area has been filled
• With the name of the user I would like to create a global highscore where every user that played the game can store their codes and other people can see the top codes, this will record the number of correct answers the player got and how quickly they managed to complete the game

I would like the questions to be randomised as well, but I had difficulties with this but I feel with more time and research I will find a way around this.

• This was a struggle for me, when I first started JavaScript I could not follow a code, but now I can follow some code, I wish to write code on the spot instead of searching online for help, but baby steps.