Video Demo: https://www.youtube.com/watch?v=xgBB6YNHXCQ
To the users around the world get to know more about Brazil, I created this quiz game which will allow the player understand more about Brazil's culture.
Knowing that, I created the Homepage as the index.html that contains the beginning of the whole game. In this page, the user can go right to the quiz, see the Scoreboard and get to know more about Brazil in a National Geographics online page.
Besides that, the quiz game include ten different questions about Brazil, which I will increase as I continue this project. The questions are regarding general and informational about my country, that we know that is not as highlighted as other countries.
Futhermore, as the player finishes their game, they are redirected to the End Page, where they can see the Final Score and save it if they want, but only if they input their name or username for that.
So, the Scoreboard only shows the top five higher pontuations. Then, I coded in CSS the whole quiz style, where I could learn more about this technology, for that I searched a lot in the W3Schools website, because there I could find a lot of details and information about how to style the web page with CSS and their proprieties. Also, I watched hundreds of videos in Youtube that helped me to get the final result that is on this project.
Also, for the JavaScript code, I needed to learn more about this technologie, mainly about Event Listeners, Arrays, creating new functions, and so on. Thereby, I used two constants to imply the maximum number of quuestions and how much score points does a question value. Likewise, I coded four functions that will make all the game, which they are: startGame, getNewQuestion, choice and incrementScore.
startGame: It is the function that set everything to 0, because the player is beginning the game and get the questions to the screen. getNewQuestion: It is the function that will do mostly all the game, it increases the progress bar while the user is playing, it selects one question and the respective options to appear in the screen and it increments the score as the player make points. choice: It is the function that helps the getNewQuestion. It makes the user experience better, because makes the user option choice change color to green if it is a right choice and so red in the wrong ones. incrementScore: It is the function that helps the getNewQuestion too. As its names, it increments the score.