This website aims to test users on their knowledge in the Warhammer Fantasy Universe.
My goal is to create a functioning, responsive and fun quiz that incorporates Javascript in its fundemental design.
It is recommended for users to open any links found in this README with Ctrl + left mouse button (Windows) Control + click (Mac).
-
New Users
- As a new user I want see a clearly laid out site.
- As a new user I want to experience a site with good visual design.
- As a new user I want to find a section that shows me the rules of the game.
- As a new user I want the site to have an interactive design.
- As a new user I want ease of access and fluid navigation through different pages and game functions.
- As a new user I want the site to be responsive on multiple different displays and devices.
-
Returning Users
- As a returning user I want to see improvements and additions to game functions and site design.
- As a returning user I want to see more quizes with new and interesting questions.
- As a returning user I want to see continued performance and accessability improvements.
- As a returning user I want to see if I can improve my previous high score.
- Home page with navigation, game start and leaderboard buttons.
- About page with navigation, showing rules and some background on game.
- A hero-image that is catchy and has "Warhammer" in its content helping users identify site.
- Inknut Antiqua. - Font is being used for all headings.
- Montserrat. - Font is used for all other text
- I feel that these two fonts fit well together and compliment my site. I have used sans serif as backup font, this is a general font and easy to read.
- I have used appropriate images for the project idea and purpose.
- The font size I have used is 1.7em for headings, 1.3em for question and other body text and 16px for buttons. I feel that these font sizes work well and emphasise the importance of the elements.
- color: rgba(29, 29, 27, 0.9); Site background with transparency 0.9 to create my desired effect.
- color: #FFD700; is used for the sites "game-area" I feel it fits with my chosen theme and helps with readability.
- color: #00008B; for when the user hovers over a button as well as an underline to help the user with cursor location.
- color: #000000; I chose this colour for text inside the gold game areas to improve readability.
- color: #00FF00; I used this color for the score area for a winning point.
- color: #FFFFFF; I have used this color for negative score in score area.
- I have primarily used Hex for my colour scheme but to reach the effect for my background I used rgba also.
- All the colours have been chosen to fit with the theme I am going for as well as having high accessibility.
- All site features are responsive on desktop, tablet and mobile.
- The main image of the page helps the user identify the theme of the site.
- Navigation bar with Home and About for easy access across different pages.
- It is responsive and has a hover feature to help user identify where cursor is located.
- Title of the site challenging user into playing the game.
- Start button to take user to game page and area.
- Uses cursor:pointer to help user identify cursor positon.
- Tells the user some information about amount of questions and answers and why it was made.
- Displays score for the user to track their progress.
- Initial game screen with "Play game" button
- The quiz takes place here with 10 questions
- 2 answers each randomised with javascript
- Selecting answers will award score to user
- This screen uses javascript to show user how many questions
- they got right and a "Try Again?" button to let user reset quiz.
- This screen is the same as above but shows a draw if user
- Gets 5 right and 5 wrong questions.
- This screen depicts a loss by the user if they end the quiz
- With more wrong than right answers.
- Google fonts. - I used Google Fonts for selecting site fonts.
- Github. - I used github to store and release project.
- Gitpod. - I used gitpod to create and write code.
- Font Awesome. - I used Font Awesome for interesting font icons.
- Light House. - I used this developer tool in chrome to test performance, accessibility, best practices and SEO.
- AmIresponsive. - I used this site to add image to the top of README and to see how my site appears on multiple devices at the same time.
-
No Errors in JSHint
- Testing with JSHint
- Navigate to JSHint
- Copy Javascript code from Gitpod
- Paste code into JSHint
- Find Configure button
- Enable New JavaScript features (ES6)
- Check results on right hand side of code!
- I am happy with the score for my desktop lighthouse test.
- The first mobile test has shown a minor performance issue
- I optimised my main image to improve performance to a satisfactory level.
I tested manually with personal or family devices
- The site behaved as expected on all mobile devices I have private access to.
- The site loaded well and performed actions such as navigation and engaging with quiz in a efficient way.
- Elements on the site were aligned well and how I expected them to.
-
Iphone 11 pro max (1242 x 2688).
-
Using Chrome mobile
-
Iphone 12 pro max ((1284 x 2778).)
-
Using iOS Safari
-
One Plus 7 Pro
-
Using Firefox Mobile
-
I tested using Chrome developer tools by right clicking the site and clicking inspect.
-
The following devices are provided via Chrome developer tools
- Moto G4.
- Galaxy S5.
- Pixel 2.
- Pixel 2 XL.
- Iphone 5/SE.
- Iphone 6/7/8.
- Iphone 6/7/8 Plus.
- Iphone X.
- Ipad.
- Ipad Pro.
- Galaxy Fold.
- Surface Duo.
-
These devices performed as I expected with the site aligning well and having consistent performance.
-
Tested on Windows 10 with a monitor screen size of 27" and resolution of 2560x1440, 144hz.
-
All elements aligned as intended
-
Navigation worked as intended allowing user quick access between pages.
-
The Quiz functioned correctly as well as having good performance
-
-
Browsers tested
- Google Chrome
- Firefox Browser
- Opera Web Browser
- Microsoft Edge
No bugs reported as of now.
- Site was deployed to github pages with the following steps.
- Navigate to github your repositories and select my repository
- In the repository find "settings" scroll down to "pages" tab.
- Select main/master in source both are correct.
- Once you make a selection the page will automatically refresh.
- A link will be provided with succesful deployment.
- You can contribute to this project without affecting the main branch with the following steps.
- Navigate to github repositores select this repository
- On the right of the repository name you will find the fork button next to star and watch buttons.
- Pressing said button will create a copy for you to use.
- You can clone this repository to local device with the following steps
- Navigate to github repositores select this repository
- Under the repository name there is a green clone or download button.
Link to deployed site. --Warhammer-Fantasy-Quiz--
Warhammer Logo. - Logo from Warhammer Fantasy Wiki.
Code Institute. - Preparing me for HTML, CSS and JS.
Favicon. - I used this site to download and implement a favicon to my site.
Fixed Footer. - W3schools helped me create a sticky footer.
Balsamiq. - Used to create my basic wireframes.