This is a quiz game build to entertain the user, teach something and test the developer's knowledge of JavaScript. The theme of the website is 'Earth', which will be visible in various aspect of the game.
The website contains an landing page, score section and the actual quiz game. The result of this project is an interactive frontend website.
1. UX
2. Features
4. Tests
5. Deployment
6. Credits
- Enjoy the game
- Learn something new
- See my score
- Gain more knowledge on JavaScript
- Learn something on given theme for a game
- Entertain myself and the end-user by playing the game
- Text - used #fffde7 (very light yellow) for text on landing page and score section so it can fit well on whole Earth background.
- Buttons - used yellow color for Start Game button on landing page, for the answers buttons #90caf9 (light blue) was used, then the colour was changing on click event in red or green depending if the answer was correct or wrong.
- Balsamiq Sans - used this font for whole website to fit nice through whole experience playing game
- Earth from Space - to show whole Earth as a place
During the design process I drew up wireframes using Balsamiq
- Landing page - couple of facts about Earth
- Start Quiz Button - allows user to start the game
- Quiz container - holds all questions, images and answers
- Score section - shows users score, feedback based on that score and Try Again button
- Try Again button - restarts the game and heads straight to first random question
- Quit button - reloads the quiz and goes back to landing page
- Timer - each question could have 30 seconds for answer to be clicked before it is treated as incorrect answer
- Leaderboard - to make it more competitive
- Add more questions or use API
- HTML, CSS and JavaScript programming languages
- Google Fonts - Balsamiq Sans
- Bootstrap - to easily adapt the website to be responsive for all users
- Jquery - to simplify certin aspects of JavaScript
- Github - used to store my repository and record my commits
- Gitpod - used as online IDE
- EZGIF.COM - used to compress gifs for feedback section
- gif-2-mp4 - converted gifs to mp4
- tinyjpg - used to compress images for better loading time
The test procedures and the key issues of the tests are written in the file testing.md
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, the website is now deployed.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open Git Bash.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL you copied in Step 3.
- Press Enter. Your local clone will be created. Click here for further reading and troubleshooting on cloning a repository from GitHub.
- Facts about Earth were taken from Earth Facts
- Questions were taken from Earth Quiz
- Web Dev Simplified - Build A Quiz App With JavaScript
- VerkkoNet - Quiz Application in JS
- James Q Quick - Build a Quiz App
- Other helpful resources were w3schools.com, CSS Gradient, Stack Overflow, Color Tools, MDN web docs and Stack Abuse