Sports Quiz is a web application created with HTML, CSS and JavaScript. It aims to test sporting knowledge across a wide range of sports and for enjoyment. The quiz will teach the user a few things they did not know about sport and also reaffirm what they do know.
- User Stories
| User Story | Acceptance Criteria |
|---|---|
| As a user I want to be able to easily navigate the quiz | The quiz has clear instructions on how to move from point to point. |
| As a user I want to know when I am right or wrong | The user will be notified if they are right or wrong by selecting the answer and being met with red or green. |
| The user should be able to use an array of different sized devices | The site is fully responsive and reacts to different screen sizes without sacrificing content or integrity |
| As a user I want all links to work | All links are working proper |
| As a user I want to understand the rules of the quiz | The rules are clearly displayed when the rules button is clicked |
| After the quiz I want to easily replay | Clear retry button on completion to restart the quiz. |
| I want to see relevent media | Pictures etc that match the tone of the site |
| User should not be able to have a changed answer count towards score | Each question cannot be reanswered and each correct answer only counts for one singular point |
I used the software Balsamiq to draw up simple wireframes to help with the design of the site. The following screenshots show the desktop browser and mobile browser (iPhone 5) for the quiz.
- Homepage
The homepage is fully responsive and allows access to the rules and quiz.
The Homepage is nicely coloured and has clear offset from the background to the content.
- Rules
A javascript function that displays the rules when they are clicked. The rules button disappears when clicked and the rules are displayed. When the begin button is pressed the rules will disappear and the quiz will start.
- Quiz
The quiz is simple and consistent and took major inspiration from the WebDevSimplified youtube page. It displays the question and then has four answer buttons with one correct answer and 3 incorrect answers. When the incorrect option is chosen the color will go red and when it is correct the colour will go green.
- Final Score
Final score caluculated through totalScoreAchieved displays after the quiz is over.
- Timer
There is a 5 minute (300 second) timer operated by javascript. When the clock reaches 0 the page will refresh and the user will need to restart the quiz.
- Retry Button
Refreshes the page and restarts the quiz
- Features left to implement
I would have liked to implement a score tracker as the questions go on and also an alert to give the user information about the question they just answered.
| Test | Outcome | Pass/Fail |
|---|---|---|
| Media | All images load correctly and are consistent with the theme of the site | Pass |
| Responsiveness | Site works on different sized screens from iPhone 5 to Desktop | Pass |
| Links to quiz | The Link correctly goes to the advertised page with no broken links | Pass |
Accessability and Performance
| Test | Outcome | Pass/Fail |
|---|---|---|
| Responsiveness | Site works on different sized screens from iPhone 5 to Desktop | Pass |
| Rules Button | The rules button starts the js function and displays the rules | Pass |
| Rules Button hide | rules button is hidden on click due to js function | Pass |
| Begin Button | The begin button starts the quiz | Pass |
| Rules Button hide | beguin button is hidden on click due to js function | Pass |
| Question area unhide | question area is visable | Pass |
| Answer buttons | All answer buttons give a response for correct/incorrect | Pass |
| Next button | After answering question the next button appears to go on to next question | Pass |
| Question shuffle | Questions appear in a different order every time | Pass |
| Timeout | After time is up the quiz will automatically end | Pass |
| Final Score | The final score shows up | Pass |
| Score Test | Score counter tested for a changed answer and checked all answers only count once | Pass |
Accessability and Performance
- All pages tested in Safari, Google Chrome and Firefox and on various screen sizes using Google Chrome DevTools.
- HTML Testing
- CSS
- Javascript JShint
I used GitHub to publish the site by doing the following:
- Log into GitHub
- Access repository
- Click on the pages tab in settings
- Click on main branch and save
- You will be provided with a link to the live site https://darraghmurphy1.github.io/PP2/
HTML 5
CSS
JavaScript
GitHub
Gitpod
Balsamic
W3C Markup, JShint and Jigsaw validation tools
Google Chrome
Youtube
- W3 Schools
- HTML, JS and CSS used from Code Institute modules
- Thank you to my mentor Marcel for various corrections and guidance
- Wireframes were created in Balsamiq
- Testing was done by Google Lighthouse
- WebDevSimplified youtube
- https://github.com/dhakal79/Portfolio-project-MS2
- https://github.com/WebDevSimplified/JavaScript-Quiz-App