The aim of this website was to use HTML, CSS and JavaScript to create an interactive, front-end site, that responds to users actions. I thought that a quiz would be a great idea as who doesn't love a good quiz.
-
- As a user, I want to test my general knowledge.
- As a user, I want to choose from a range of answers.
- As a user, I want to see my score as I progress.
- As a user, I want feedback from the questions.
-
-
-
used for background colour
-
used for hover effect on buttons
-
-
black was used for text
-
white was used for body background
-
blue was used for border colour
-
green was used for the text colour of correct answers
-
red was used for the text colour of incorrect answers
-
- I have used Merriweather for the font style with a backup of sans-serif should it not be accessible for all.
-
-
- The image used for the logo was taken from clipart (acknowledged in credits)
- consists of a logo and title of the quiz
- each question is displayed randomly 10 questions per game 40 questions to choose from
- Four answers to choose from shows green for correct and red for incorrect
- Allows the user to restart at the end of a game instead of using browser refresh
- Allows user to see their correct and incorrect score as they progress
- HTML
- CSS
- JavaScript
- Balsamiq
- For the wireframes
- Git
- For version control, commiting, and pushing to Github
- Github
- For storing the repository, files, and images pushed from Gitpod
- Gitpod
- IDE used to code the website
- Chrome developer tools
- for checking compatibilty, troubleshooting and editing code
- Am I responsive
- Used to test responsiveness of the website at different screen sizes.
- Google Fonts
- Used for the font of the website.
- Freeformatter.com
- To format my HTML, CSS, and Javascript code
The W3C Markup Validator, W3C CSS Validator Services and jshint.com were used to validate every page of the project to ensure there were no syntax errors in the project.
- jshint
- Brought up eight warnings of missing semicolons, which were all corrected.
- Brought up three unused variables, which was rectified.
- The site was tested using Lighthouse
- The site was tested on Chrome and Safari
- The site was tested on an iphone 7, ipad, sony Experia and my dell laptop.
- As a user, I want to test my general knowledge.
- A range of 40 general knowlege questions included each game with ten random questions.
- As a user, I want to choose from a range of answers.
- Four possible answers are available to choose from.
- As a user, I want to see my score as I progress.
- There is a correct and incorrect score counter at the bottom for the user to see.
- As a user, I want feedback from the questions.
- The correct answer shows green, the incorrect answers shows red.
-
When the quiz was due to restart, I noticed that the users were not noticing that the next button had changed to a restart button,
- I implemented a flashing restart button to alert the user to its difference allowing them to then check their scores before replaying.
-
There was a big scroll especially on mobile devices needed when the scores were at the top of the screen.
- I moved them to the bottom, therefore reducing the amount of scrolling needed by the user, making it more user friendly.
- slight scroll needed to see the incorrect answers at times.
- All buttons have been tested and are accessible
- All buttons have been hovered over to ensure they work
- All images load as intended
- The game works as I intended
- In the future I would like to implement a score tracker so when the game was finished it would display the results with comments on how well the user had done.
- In the future I would like to implement a progress bar or counter so the user knew how many questions they had answered or had left to answer.
- The project was deployed to Github pages using the following steps:
- Log into Github and locate the Github repository.
- Click on the settings icon at the top of the repository.
- Scroll down until you come to the Github pages section
- On this part it says it now has it's own dedicated tab and to click check it out click this.
- Where it says source select main, next to this should say root.
- Click save, then refresh the page.
- Log into the Github repository.
- Underneath your avatar is a button labelled Fork, click this.
- You should have your own copy now.
- Log into Github and locate the repository.
- Under the repository name click the button labelled code.
- You will see an option to clone or download.
- Copy the url for cloning by clicking the clipboard icon.
- Launch gitpod or your own choice of directory.
- Open Gitbash
- Change the current working directory to the location you want the cloned directory to be.
- Type git clone and paste the Url from step 4.
- Press enter to create the cloned directory.
- logo image
- Who wants to be a millionaire - bumper quiz book
- used to generate the questions and answers
- watched this you tube video for help to get started and took some snippets from it. You tube link
- Code institute for course material and content
- Everybody on the slack community for support, advice, guidance and patience.
- My mentor for assistance and advice on planning and final submission feedback.
- My husband and children for their patience, support and understanding.