Welcome to Video Game Quizzes !

Are you a video gamer and you looking to test your gaming knowledge ? So let's get started and have fun!

Thank you for visiting my project! If you have any feedback or questions, head over to my GitHub contact details and feel free to reach out to me.

• UX
  • User Goals
  • User Stories
  • Site Owners Goals
  • User Requirements and Expectations
    • Requirements
    • Expectations
  • Design Choices
    • Fonts
    • Colors
    • Structure
• Wireframes
• Features
  • Existing Features
  • Features to be implemented
• Technologies used
  • Languages
  • Libraries and Frameworks
  • Tools
• Testing
• Deployment
• Credits
• Closing Note

• The game has to be responsive for all the devices sizes like tablets, phones and desktops
• Display feedback for correct/incorrect answers
• Display a visual progress bar to track user's progress through the questions
• During the game track the number of questions
• Visual appealing website

Back to Top

• As a user, I would like to know the rules of the game before playing.
• As a user, I would like to know how many time left I have to answer the question.
• As a user, I would like to know the correct answer when answered incorrectly.
• As a user, I expect that the game has a nice visually appealing lay out to be in line with the game.
• As a user, I expect a variety of questions so no questions get repeated.
• As a user, I would like to learn new things about Video games while I'm playing the game.
• As a user, I want to know where I am in the game, to know how many questions I still have left.
• As a user, I want to be able to restart the game once is over.
• As a user, I want to be able to save my score.
• As a user, I would like to compare my score whit other players.

• To have an appealing website where users want to go to Test their Video game knowledge.
• For the users to have fun while playing my game.

Back to Top

• Easy to navigate
• Appealing homepage
• Easy way to understand game rules and start the game
• Validate the correct answer
• Store the score of the user playing

• Show which number of the questions user is in
• To let the user know if their answer was correct or wrong
• Show correct answer when answered incorrectly
• To show the final result after playing
• Show a personalized message with funny image after completing the game

Back to Top

I have used Coolors to create a color scheme that matches the atmosphere. The design choose is simple but I would like to create cool and animated background.

I have visited Google Fonts to explore the various options. For the title of my game, I have used the font Source Code Pro.

I have decide to use some colors that reminds the background image used.

• Color #D12D6F is used for some buttons, progression bar and the endgame container.
• Color #E05A5C is used for main game box container.
• Color #7A2D8D is used for the 4 possible answers to the questions.
• Color #fff is used for all the text and headings.

Back to Top

For the wireframes design I decide to use Balsamic. First I created a basic wireframe for mobile and after I created the one for desktop and tablet.

Below you can find my wireframes:

• Homepage

• Homepage

• Homepage

Back to Top

• Use of open Trivia API
• Answer validation
• Feedback provided if answer is incorrect
• Questions progression
• Timer countdown for each question
• Score update while user is playing
• Personal message when game is over depending on the final score
• User score can be saved in local storage
• Leader board with top 5 scores

• Database to proper save and render user scores
• Add different images for each questions
• Implement difficulty to be choose by users

Back to Top

• HTML
• CSS
• JavaScript

• Font Awesome
• Bootstrap
• Google Fonts
• Particle.js

• GitPod
• Balsamic
• W3C HTML Validator
• W3C CSS Validator
• Open Trivia Database

Back to Top

• Plan
  After the page is loaded, the user should have the option to click a button 'Quiz Rules' when they can read more about rules in place for this game.

• Implementation
  Adding an extra button when page is loaded with 'Quiz Rules' that triggers a container. In the container there 5 rules in place written and another button that says OK . When the button Ok is clicked the container is closed and return to main page where user can start the game or read rules once more.

• Test
  The container have been tested on various browsers and devices. Only when the user clicks the OK button will be able to go back to the main page and start the game.

• Result
  Container works as planned and makes overall user experience much better.

• Verdict
  Test passed all the criteria and works as planned.

• Plan
  When the game starts, user should be able to see a countdown timer that tells how many seconds left they have to answer the question. When gets to next question timer reset.

• Implementation
  Adding a function in app.js, the function startTime() execute as soon as the user get the question. The setInterval() method in Javascript calls a function or evaluates an expression after the specified number of milliseconds (in my case 1000), and time decrementing.

• Test
  I tested the timer by playing the game from first to last question to make sure it works as planned. During the first test I discovered that timer didn't restart when user answer was correct, and I realized that I didn't pass clearInterval() and startTime() inside setTimeout when validating user selected answer.

• Result
  Timer works as planned across various devices and browsers.

• Verdict
  The test has passed all the criteria and works like planned.

• Plan When user select correct answer, the choice should highlight in a shine green color. In the other hand when answer in incorrect, the choice should highlight in red color.

• Implementation
  Adding a function in app.js which validates user answer and add classes in order to highlight relevant choice. I added a setTimeout function to make sure that user has sufficient time to see if the asnwer is correct or not.

• Test
  I tested the answer validation across various devices and browsers to make sure it works as planned. When testing on mobile scrren I realized that the highlighted choices size was too small and a gap was visible, I had to resize the classes correct and incorrect to fix it.

• Result
  Answer validation is working as expected and is more user friendly due to the full game being displayed on the screen on small devices.

• Verdict
  The test has passed all the criteria and works like planned.

• Plan The original plan was to have question counter display with numbers underneath the 4 question to the left side. After the first testing I decide to change it with a progress bar which updates every next questions and shows what percentages user is on the game. The reason for this change is that it looks better in terms of user experience.

• Implementation
  I added to extra div in index.html, one it works ad a container and the other shows progress bar when user goes to next question. There is an innerHTML which add width in the nextQuestion function. The percentage is than calculate to show the current position. The progress bar starts at 0% and it moves 10% up for each question.

• Test
  I have tested the progress bar across different devices and browsers to make sure it works accordingly. Progress bar is reacts responsive and for me it has a better result for user experience.

• Result
  Progress bar works as planned across various devices and browsers.

• Verdict
  The test has passed all the criteria and works like planned.

• Plan When the game is over an end message is displayed with the score user got. I want to show different option to the user and one of this option is to click a button to play the game again so that if is clicked will take the user to the home page.

• Implementation
  Displayed a button in the end message container, added an event listener in JavaScript to trigger the button when is clicked to take back the user to the home page. On the home page user can than click 'play quiz' to restart the game.

• Test
  I have tested on various devices to make sure it works as expected, on mobile at the first test the play again button was to close to other buttons and it wasn't easy for the user to spot. I added more margin and also give a different color.

• Result
  Play again button works as planned across various devices and browsers.

• Verdict
  The test has passed all the criteria and works like planned.

• Plan Once the game is over user will see end game message with a personalized message depending on the final score that the user got. After the score results I want the user to be able to see 'save your score' message with an input and underneath then input, a Save button.

• Implementation Displayed a button 'Save' with the input where user can type is name, the button is disabled until user start to type in, this is achieved adding 'keyup' event in Javascript. In app.js I then added push object to array in order to store more than one user score and sort method to show scores from highest to lowest. I used localStorage setItem method to update that key's value.

• Test
  I have tested on various devices to make sure it works as expected, I discovered that the score number was displayed as null value, I realized that I didn't pass correct properties to the score object, to fix it I passed mostRecentScore to it.

• Result
  Save score button works as planned across various devices and browsers.

• Verdict
  The test has passed all the criteria and works like planned.

Back to Top

Timer countdown doesn't restart

• Bug
  When you click on answer it shows feedback and go to the next question, the timer doesn't restart at 15 but continue the countdown left at the previous question.

• Fix
  At the end of the conditional statement inside validateUserAnswer I had to pass clearInterval(counter) and the startTime() function in order to reset timer for each question.

• Verdict
  When answer a question getnextquestion is activated and timer restart at 15 seconds as planned. Bug resolved.

Questions repeat when play again

• Bug
  After finish the game and play again button is clicked I get the same question from previous game.

• Fix
  At the end of playAgain event i added Location reload() method in order to reload the current document.

• Verdict
  When I finish the game and click on Play Again button I get new questions as the page is reloading. Bug resolved.

Question and answer showing with double quotes and other unwanted characters

• Bug
  When fetching questions from the API it returns with % sign and &.

• Fix
  Updated the innerText to innerHTML in game.js

• Verdict
  Questions are now showing nicely as expected. Bug fixed.

Back to Top

I created this project using GitHub, from there I used GitPod to write my code. Then I used commits to git followed by "git push" to my GitHub repository.

Steps:

• Navigate to the repository on GitHub and click Settings.
• Go to the Source section within the GitHub Pages section.
• On the drop down menu select master branch and click save.
• Now your website is live on:

https://yourgithubusername.github.io/your-repo-name

• When you commit pushes are sent to GitHub and the GitHub page should update shortly after with total commits.

1. From the application's repository, click the code button and download the zip of the repository.
2. Alternatively you can clone the repository Using the Clone with HTTPS option, copy the link displayed.
3. Open your IDE, and ensure the Git Terminal is open.
4. Change the working directory to the location where the cloned directory is to go.
5. Use the "git clone" command and paste the url copied in the second step.

Back to Top

• For this project I got inspired from the youtube channel CodingNepal, this video helped me to get start with the project.

• Special thanks to my mentor Simen Daehlin , I would like to thank Simen for helping me getting start with this project and for guiding me into becoming a better developer.

• For the particle.js used in the saving score part, I have to thank Louis Hoebregets.

Back to Top