This project was developed for my Interactive Front-End Development module as part of my Full Stack Development Course with Code Institute
The Tipsy Quiz is a fun interactive website where the user partakes in a General Knowledge quiz. The quiz itself is themed around a pub quiz. Answer multiple-choice questions to gain as high a score possible before the Quiz ends, Don't forget to enter a username and submit your score to rank on the high scores.
- Quiz enthusiasts.
- People who enjoy a pub quiz.
- People wanting a quick and stylish quiz application.
- People of all ages.
-
First time user:
- As a user I would like to partake in a fun quiz.
- As a user I would like to be able to see how I rank on the High Scores.
- As a user I want the application to be easy to navigate.
-
Returning User:
- I would want to be able to navigate the site with ease.
- I would want to be able to quickly check the High Scores.
- I would want to be able to remember how to use the application with ease.
-
As a site creator:
- I want to make the site interactive and fun.
- I want to ensure there are enough questions to prevent the user from becoming bored.
- I want to make sure the user enjoys their time using the application.
- I want to provide easy access to the creator to submit questions.
Create an interactive quiz that displays all data in a clear and easy-to-read way. Provide consistent styling across all pages using a mobile-first approach and ensure that the application runs flawlessly across all devices. Create code that allows for ease when implementing future updates and features.
- To provide a fun and interactive application.
- For the question bank to be regularly updated.
- Allow for users to log scores.
- Provide quiz audio for questions to be readout.
The scope of The Tipsy Quiz in its first release is defined by the following features:
- Functioning Quiz Application.
- Ability to submit scores to a High-Scores table(local storage).
- Mobile-first, fully responsive design.
- simplified contact form.
- easy to navigate and responsive navigation bar.
- Footer with Dev links.
- Favicon is relative to the application.
- Help page to assist in how to use the application.
- All links are functioning
Features that are to be considered for future releases:
- Dark mode.
- Random subject wheel.
- Difficulty Mode.
The structure for the application has been thought out and designed to allow for the user to have a seamless and easy experience. A consistent minimalistic design will be implemented on all pages. The flow of the pages will feel natural and allow for the user to feel right at home after only viewing one page.
-
Header
- The logo will act as a link back to the homepage.
- The small navigation will be the same on all pages allowing for quick movement and ease of navigation.
-
Quiz
- A counter to show what question you are on.
- A button to allow for speech synthesis to read out the question.
- Your current score.
- The question itself.
- 4 answers buttons of which only 1 is correct.
-
Game Over
- Text field to enter a name.
- Your score from that round.
- A submit button
- Play again button.
- HighScores button.
-
High Scores
- Rankings for people’s scores.
- Play button.
-
Help
- Quick and brief description on how to play the quiz.
- Contact Form.
-
Footer
- Small help button to link to the help page.
- Dev link / socials.
Desktop:
Tablet:
Mobile:
The colours that will be used throughout the site for its main styling are shown below, these colours have been picked to keep within the design brief of maintaining a simplified viewing pleasure.
The colours will be used in specific ways that complement one another, maintaining good contrast levels.
With the design of 'The Tipsy Quiz' aiming to be fun and interactive, I have picked two fonts that will have a continual use case throughout the design of the site.
The initial plan was to use Pangolin and Roboto Slab. After initial coding and live site viewing with early deployment via GitPages, I soon realized that the fonts chosen would not work, so new fonts were needed. I have settled on the following fonts:
- Schoolbell - A fun and stylish font that is easy to read and will be used for headings.
- Poppins - A very stylish and easy-to-read font. Will be used for the bulk of the text.
- Oswald - This bold and block style font will be used for navigation items.
There will be multiple icons used throughout the application. Font Awesome will be the main source for icons.
During the design phase, there was no real need for images to be used but the sparsity on the homepage after initial HTML and CSS was completed pushed me to include an image in the open space. The image I used was taken from a Cocktail Party App Blog post.
- Speech Synthesis for reading out the question when needed.
- Correct and incorrect audio
- Save score to a local High Scores table.
- Submit a question to the creator.
- Implement PWA, to allow users to install the application on their own device.
- Dark mode.
- Random subject wheel.
- Difficulty Mode.
- Randomly organize answers each time a new question is loaded.
- Add more questions either by current method or API.
- Google Fonts
- Used for importing fonts, allowing for the fonts to be available for all users.
- Font Awesome
- Font Awesome provides all the icons used for the site.
- Visual Studio Code
- My personal preference for IDE(Integrated Development Environment) was used for this project.
- Git & GitBash
- Git for Windows provides a BASH emulation which allows for git to be used straight from the command line.
- GitHub
- Provided a Remote repository for the application. Allowing for my coding to be backed up online as I go.
- Balsamic
- Balsamic was used to design wireframes for the application.
- Coolors
- For colour inspiration and pallet.
- iCons8
- icons8 was used for sourcing a Favicon.
- Stack Overflow
- For general Queries and reassurance.
- Squoosh
- For compressing images.
- Auto Prefixer
- Automatically prefixes the necessary webkits to the CSS.
For testing, I will use multiple resources, HTML and CSS validators, Chrome Dev Tools Lighthouse tests as well as thorough user testing. Any errors and bugs found during the testing stage will be noted in the Bugs & Fixes section.
All HTML pages have been tested with the w3c validator and passed with no errors.
style.css has been passed through the CSS validator and passed with no errors. The test does show some warnings, but after some research They are nothing to be worried about.
All .js files have been passed through JSHint and do not show any errors. Along with this, after serious use of the site, there have been no errors showing in the console also.
In-depth user testing has been carried out across multiple devices and the results can be found in the above link.
For running the lighthouse tests, I used an incognito window to avoid any errors and issues that could be caused by any of my Chrome extensions.
- Index.html
- quiz.html
- game-over.html
- high-scores.html
- help.html
Using the user stories I came up with during the pre-design phase of this application, I tested them out to see if I have achieved them, I also had other people test the site and asked them the user stories as a question to see if they came true.
The results of this test can be found here: User Story Test Results
- RESOLVED -- README.md links to open in new tab.
- Some specific links to this README.md file would work better if they opened in a new tab when clicked but after some testing and then research I found out that this is not possible. Evidence.
- FIXED -- :is CSS pseudo-class
- This was used after watching Kevin Powells video on simplifying CSS, unfortunately, when passed through the CSS Validator this showed errors, where I had used the :is class, Therefor I have removed and replaced with code that passes, this code is longer but passes the validation.
- When using the application on mobile the hover effect is still present on the next question, also hover only works when clicked. See here for evidence.
- For this, I have removed the pseudo-class :hover and added JS event listeners for mouseover/mouseleave and then for touch on mobile.
- FIXED -- When using the play button to read the question out via Speech Synthesis, the speed that the question was read out at was too fast.
- To resolve this issue I lowered the speaking rate to 0.9(Default = 1.). This now means the question is read out slower, but still maintains a natural speaking speed.
- After you complete the quiz you are taken to game-over.html and the "save score" button is disabled until you enter data into the input field. For some reason the default "disabled" cursor will not show when over the button.
- After a lot of time researching this issue, It was made clear that the simple fixes i had seen on stack-overflow weren't working. So this issue is still open and currently just shows a standard cursor whilst the button is disabled and then changes to a pointer cursor when the button is enabled.
For a live preview of the site, the code has been deployed via GitHub pages, this has been done at the start of the project to implement device testing as the build progresses.
The steps to deploy via GitHub pages are as follows:
- Log into Github account.
- Navigate to the Repository.
- Click the 'Settings' option at the top of the repository.
- Click the 'Pages' option on the left-hand menu, located near the bottom.
- Within the 'Source' tab Select the drop-down titled 'None'.
- Select the branch named 'main' (in some cases it can be named 'Master').
- Click 'Save'.
- You will be prompted with a URL to your deployed site.
- Site deployed.
When the above steps have been completed, it can sometimes take a little while for the deployed URL to update, So just keep checking back and refreshing the page until your site is visible.
To use this code and make changes without affecting the original code you can do what is called 'Forking the repository'. By forking this repository you are given a copy of the code at that moment in time that you can use freely. To fork this repository you need to follow the following few steps:
- Log into your GitHub account.
- Navigate to the Repository, you are wanting to fork.
- In the upper-right of the repository, click the 'Fork' button.
- A copy of the Repository will now be available within your repositories.
You will now have a copy of the code available to clone and work on without affecting the original code.
To make a local clone of the project follow these steps:
- Log into your GitHub account.
- Navigate to the Repository.
- In the upper section of the repository click the dropdown named 'Code'.
- Copy the SHH address.
- Open GitBash
- Navigate to the correct directory.
- Create a new directory named 'the-tipsy-quiz'.
- CD into 'the-tipsy-quiz'.
- Enter 'git clone SSH_ADDRESS'
- GitBash will clone the repository into this directory.
- enter 'code .' and this will open VS CODE and happy coding.
- Brian Design
- Brian's YouTube video for a JS quiz was used as inspiration and a stepping stone for this application. Code used form Brian's video has been credited within comments. In some cases this video was referred to for a lot of help so for that I owe a great deal of thanks.
- Shake Hover Effect
- W3Schools code for "shake effect" was used.
- SpeechSynthesis
- Assistance with implementing speech synthesis.
- AllowSave Function
- Help will "Keyup" event listener to only allow save if input field has had data entered into it.
- MDN Web Docs
- By far my most used resource during this project, nearly every question or doubt I had, I could find the answer within MDN.
- Stack Overflow
- Very grateful for this website, helped me in many situations not just with JS but also with HTML and CSS in some cases.
- Code Institute.
- Provides a great learning platform that has helped me get to this point.