Coder's Coding Challenge! - Test your knowledge in HTML, CSS and JavaScript!
Developed by, Dan Pearce
The Coder's Coding Challenge Quiz App/Website is designed to encourage people to test their skills in HTML, CSS and JavaScript! It's intended to be a fun interactive site that allows the user to choose a difficulty and give them feedback on how they are scoring throughout the quiz.
The site has been designed with simplicity in mind allowing the focus to be the game, with other features pushed to the bottom of the page.
Contents
- Site Goals and Consumer Experience
- User Stories
- Design
- Main Features
- Technologies
- Validation and Testing
- Bugs and Errors
- Deployment
- Credits
- Acknowledgements
Site Goals and Consumer Experience
Consumer Goals
- Easily navigate around the quiz.
- Easily distinguish between a correct and incorrect answer.
- Test their skills in HTML, CSS and JavaScript.
- Contact the website owner for suggestions/errors.
Website Owner Goals
- Provide the consumer feedback on how they scored throughout and at the end of the game.
- Provide an experience that is fully responsive.
- Provide a point of contact so that the consumer can contact about bugs or future developments.
Target Audience
- Beginner/Moderate students or casual coders who wish to test their skills in these languages.
- Students/coder's that like to be tested through a quiz.
- Anyone with an interest in coding, looking to test and expand their knowledge.
Consumer Expectations
- A fully responsive site that can be accessed on all devices without error.
- Easily distinguishable sections and design.
- An interactive fun game experience with ease of use in mind.
- Easy and simple navigation throughout the site.
- Fully functioning links with no pages that lead to errors or dead links.
- Accessibility throughout the website.
User Stories
User
- As a user, I want to be able to test my knowledge in HTML, CSS, and JavaScript with an interactive quiz.
- As a user, I want to be able to choose the level of difficulty I want to be tested at.
- As a user, I want to be able to distinguish between when I got an answer correct or an answer incorrect.
- As a user, I want to know which answer was correct should I get the answer incorrect.
- As a user, I want to be provided with a tally of the score I have received.
- As a user, I want to be able to turn the sound off should I want to.
- As a user, I want to provide feedback to the owner, and be informed that said feedback has been sent.
Website Owner
- As an owner, I want to provide a site that is fully responsive for all users.
- As an owner, I want the user to be notified when they have scored correctly/incorrectly.
- As an owner, I want to allow the user to send feedback directly to me about the site.
- As an owner, I want the user to be always aware of our social media presence.
- As an owner, I want the user to easily navigate back to the main quiz page should enter an incorrect URL.
Design
Structure
For the site I wanted to provide the user a simple and easily followable structure. To do this I wanted the focus to be the quiz and all other forms of navigation to be pushed to the bottom of the page in the footer.
Index Page
The index page is the main page, so this is where the quiz is located. The quiz takes up considerable space and is the biggest section on the entire page.
- The page has a header, welcoming people to the site with detail about the site and quiz.
- The quiz section is just underneath the header and is fixed into place.
- The random advice API is located near the bottom of the page to allow the quiz to build space as the JavaScript inserts new code.
- The footer is fixed into place at the bottom of the page and is visible no matter where you are scrolling through the site.
Contact Us Page
The contact us page is the only other 'main' page on the site and uses the design from the quiz but instead holds a form inside.
- The form is simple and easy to read.
- Once submitted the JavaScript removes the form and displays the user with a screen that informs them their form has been submitted.
404 Error Page
This page has been implemented to provide a fall back in case of input error to the URL to ensure the user can remain on the site. Again keeping the same design structure from the main quiz.
Wireframes
Index Page
Welcome/Difficulty
Main Quiz
Next Question/Answers Revealed
End of Quiz
Contact Us Page
Form Sent
404 Error
Colour
The colouring of the site has been kept simple to make it clear to user's when they're on a normal page, when the have answered correctly, when they have answered incorrectly and when they have successfully sent a message using the form. This has been achieved by changing the background colour of the body through JavaScript.
Colour Palette
All the pages were tested in terms of contrast using WebAIM
Normal Contrast
The normal colour for the site is a turquoise colour and this is to distinguish to the user that this is neither a correct or incorrect page.
Normal Contrast
Correct Contrast
When a correct answer is clicked a green background is used.
Correct Contrast
Incorrect Contrast
When an incorrect answer is clicked a red background is used and the font colour is changed to a whiter colour.
Incorrect Contrast
Form Sent Contrast
When the form has been sent, the background colour is changed to match the image used.
Form Sent Contrast
Font
The font used on this website is Courier New and this was chosen specifically for it's retro feel for computers - I thought this was particularly relevant as the quiz is related to coding!
Icons
I used favicon.io to create the favicon icons for the site, and used Roboto as the font for this as I thought this looked the most traditional for the classic '</>' code symbol. The colours are also featured on the site to stay consistent with styling.
Icons from Font Awesome we're also used throughout the site, notably the home button on the quiz, the sound controls and the social media links also.
Main Features
The features of this website are all combined to create a fully functioning quiz with added sounds and colours to create an interactive experience for all.
Header
At the top of the webpage the header is prominent and gives the consumer a welcome message and underneath details the use of the current page that they are on. The header is changed depending on which page they are currently on, and this allows the user to understand what each page does.
- User Story Testing: 1, 10, 12
Header Index Page
Header Contact Us Page
Header 404 Error Page
Username
The site implements the use of a username! The user is prompted to enter a username upon the page opening - which is then used to welcome the user on the next page. This username is also displayed at the end of the quiz to inform the user of their score.
- User Story Testing: 1, 3, 8
Username Entry
Welcome User
User with Score
Game Modes
The game allows the user to decide which level of questions they would like to be challenged with in the quiz. This is available immediately after they enter a username and comes in Easy, Moderate and Hard and the questions will change accordingly.
- User Story Testing: 2
Game Modes
Main Game and Game Controls
Upon deciding which game mode to play, the user will be brought to the first question which is shuffled randomly to make the game slightly harder if replaying.
Main Game
The functionality is simple, the user must pick an answer out of four choices.
- User Story Testing: 1
Main Game
Question Counter
At the top of the quiz section the quiz counter can be seen providing the user a visual counter on how far through the quiz they are and providing a numerical counter too.
- User Story Testing: 1
Question Counter
Correct and Incorrect Answers
The user will pick an answer and depending on whether they got it correct or not the game will give several visual clues to support the answer they picked.
The buttons will all change colour including the one they selected; the correct one will be green, and the incorrect ones will be red.
- User Story Testing: 3, 4, 9
Buttons Answer Clicked
The main body changes to green if they chose the correct answer.
Correct Body
The main body changes to red if they chose an incorrect answer.
Incorrect Body
Score
The score is featured near the bottom of the quiz container. The correct/incorrect score will increment depending on which answer the user clicks.
- 4, 5
Score Area
Score Example
Audio & Audio Controls
Throughout the game there are several audio cues that play when buttons are clicked, and answers have been clicked. In order to control the audio, there is an implemented audio symbol that allows the user to turn audio on or off.
- User Story Testing: 6
Audio On
Audio Off
End Game
At the end of the quiz the user is shown their result and is also given a personalised message depending on which result they got.
- User Story Testing: 5
End Game
Random Advice API
Underneath the quiz the user is displayed a random piece of advice, generated from the random advice API.
- User Story Testing: 8
Random Advice API
Footer
At the bottom of each page the footer is fixed into place to provide the user a form of consistent navigation between the pages - and to showcase the social media links.
- User Story Testing: 11
Footer
Contact Us Page
The site features a contact us page which uses the same styling as the home page.
- User Story Testing: 7, 10
Contact Us Page
Form
The contact form area allows the user to input their details and a message that will be sent directly to the owner.
- User Story Testing: 7, 10
Form Area
Form Sent
Once the contact form has been submitted successfully the user is displayed with a new message which informs them it has been sent successfully.
- User Story Testing: 7
Form Sent
404 Error Page
The 404 error page provides a fall back for the user should they enter an incorrect URL extension to the website. The page features an image with relating text and a button for the user to navigate home.
- User Story Testing: 12
404 Error Page
Technologies
Languages
APIs
Frameworks and Other Technologies
- GitHub
- GitPod
- Font Awesome
- Balsamiq
- Google Chrome Developer Tools
- Google Fonts
- Favicon.io
- Tiny PNG
- Email JS
Validation and Testing
HTML Validation
The HTML has been tested using the W3C Markup Validation Service in order validate the correct function of this site. All pages have passed with no errors or warnings.
Index Page Validation
Contact Us Page Validation
404 Error Page Validation
CSS Validation
The W3C Jigsaw Validation Service has been used to test the CSS of this website. The CSS has passed with no errors.
CSS Validation
JavaScript Validation
JSHint was used to test the JavaScript of this site and all js files have passed with no errors.
Game JS Validation
Audio Js Validation
Form JS Validation
Random Advice JS Validation
Questions JS Validation
Accessibility Validation
The WAVE - Web Accessibility Evaluation Tool was used to test the accessibility function of the website, all pages have passed with no errors.
Index Page WAVE Validation
Contact Us Page WAVE Validation
404 Error Page WAVE Validation
Performance Validation
Lighthouse in the Google Chrome Developer Tools was used to test the performance of the website and all pages have passed with a green score.
Index Page Performance
Contact US Page Performance
404 Error Page Performance
Device and Browser Compatibility
Device Testing
This website and game has been tested on numerous devices all of which result with full functionality and no visual issues the devices I tested on were as followed:
- MacBook Pro 16-inch
- Desktop PC with 32-inch screen.
- iPhone 12 Pro
- iPad Pro 11inch
- Microsoft Surface Pro 3
- This site was also tested on all default Google Chrome Developer Tool screen sizes.
Browser Compatibility
The project was tested and viewed on the following browsers with no errors:
User Story Testing
| User Story 1 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As a user, I want to be able to test my knowledge in HTML, CSS, and JavaScript with an interactive quiz. | Load the webpage | The user to be able to play an interactive quiz | Works as intended |
User Story 1 Supporting Screenshots
| User Story 2 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As a user, I want to be able to choose the level of difficulty I want to be tested at. | Click the game difficulty they wish to play | Display a different set of questions based on the clicked response | Works as intended |
User Story 2 Supporting Screenshots
| User Story 3 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As a user, I want to be able to distinguish between when I got an answer correct or an answer incorrect. | Click an answer | To be told visually about a correct/incorrect answer through the use of colour | Works as intended |
User Story 3 Supporting Screenshots
| User Story 4 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As a user, I want to know which answer was correct should I get the answer incorrect. | Click an answer | To be shown the correct answer, even if the answer clicked was incorrect | Works as intended |
User Story 4 Supporting Screenshots
| User Story 5 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As a user, I want to be provided with a tally of the score I have receieved. | Play the game as normal | Score to be displayed at the bottom of the quiz, and a tally at the end of the quiz | Works as intended |
User Story 5 Supporting Screenshots
| User Story 6 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As a user, I want to be able to turn the sound off should I want to. | Click the audio icon | The audio to turn off/on depending on the user's desire | Works as intended |
User Story 6 Supporting Screenshots
| User Story 7 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As a user, I want to provide feedback to the owner, and be informed that said feedback has been sent. | Click the contact us page, fill out the form correctly and click submit. | The form will disappear, and the submitted page will take its place | Works as intended |
User Story 7 Supporting Screenshots
| User Story 8 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As an owner, I want to provide a site that is fully responsive for all users. | Load on various devices | The webpage to be fully responsive, regardless of screen size | Works as intended |
User Story 8 Supporting Screenshots
| User Story 9 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As an owner, I want the user to be notified when they have scored correctly/incorrectly. | Click an answer | The body will visually change colour depending on the answer clicked | Works as intended |
User Story 9 Supporting Screenshots
| User Story 10 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As an owner, I want to allow the user to send feedback directly to me about the site. | Click the contact us page, submit the form with no errors | A form to be provided on the site for communication between user and owner | Works as intended |
User Story 10 Supporting Screenshots
| User Story 11 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As an owner, I want the user to be always aware of our social media presence. | Navigate to the footer of the page | The social media links are always visible on the page | Works as intended |
User Story 11 Supporting Screenshots
| User Story 12 | User Action | Desired Outcome | Actual Outcome |
|---|---|---|---|
| As an owner, I want the user to easily navigate back to the main quiz page should enter an incorrect URL. | Incorrect URL input | Easily navigate back to the main quiz | Works as intended |
User Story 12 Supporting Screenshots
Bugs and Errors
HTML Bugs/Errors
| Index Validator Error | Resolution |
|---|---|
| 'Error No p element in scope but a p end tag seen.' | Change the opening and closing tag to a div, as this was intended to be a section |
Index HTML Error
| Contact Validator Warning | Resolution |
|---|---|
| 'Warning The type attribute is unnecessary for JavaScript resources.' | Remove the type attribute entirely |
Contact HTML Warning
| 404 Validator Error | Resolution |
|---|---|
| 'Error An img element must have an alt attribute, except under certain conditions' | I forgot to add the alt attribute, resolved by adding this attribute(Oops!) |
404 HTML Error
JavaScript Bugs/Errors
| game.js JSHint Warnings | Resolution |
|---|---|
| 'Missing semicolon' on several lines, and 'A leading decimal point can be confused with a dot: ".5".' on three lines | Add the missing semicolons, and change the '.5' to '0.5' |
game.js JS Warnings
| audio.js JSHint Warnings | Resolution |
|---|---|
| 'Missing semicolon' on one line, 'Functions declared within loops referencing outer scoped variable may lead to confusing semantics' and 'Expected an assignment or function call and instead saw an expression' | Add the missing semicolon, and after speaking with my mentor as these are only warnings and not directly affecting the code, he said I can ignore these errors |
audio.js JS Warnings
| random-advice.js JSHint Warnings | Resolution |
|---|---|
| 'Missing semicolon' on two lines | Add the missing semicolons |
random-advice.js JS Warnings
| form.js JSHint Warnings | Resolution |
|---|---|
| 'Missing semicolon' on two lines, and 'Expected an assignment or function call and instead saw an expression' | Add the missing semicolons, fix the placement of the ')' |
form.js JS Warnings
| questions.js JSHint Warnings | Resolution |
|---|---|
| 'Missing semicolon' on three lines | Add the missing semicolons |
questions.js JS Warnings
| Score Counter Bug | Resolution |
|---|---|
| While testing, I noticed a bug that allowed the user to continue clicking the answer buttons after they had already selected an answer - this in turn continued to increment the score area. | I created a disableAnswerButton function which loops through the answer buttons when it is called and sets them to disabled. This is then called after answerClicked has been called. |
Accessibility Bugs/Errors
| Index Errors and Contrast Errors | Resolution |
|---|---|
| Missing label on username input, and several colour contrast errors | Add the label to the form, and revamped the colour scheme to result in no errors. To do this I had to change the colours in CSS and add extra JavaScript so that the red body background didn't conflict with the original darker colour for the text on the main body, I simply added the incorrect class to these elements and changed the colour accordingly. |
WAVE Index Errors
| Contact Us Page Errors and Contrast Errors | Resolution |
|---|---|
| Missing label on portfolio input and colour contrast | Add the label to the form, this was originally left blank intentionally as its functionality is purely there to inform the owner which site this was sent from with Email JS, however to solve the error I decided to add the label - same as above revamped the colour scheme. |
WAVE Contact Errors
| 404 Page Errors and Contrast Errors | Resolution |
|---|---|
| Missing alt attribute on img tag, and colour contrast errors | Add the missing alt attribute and revamped the colour scheme. |
WAVE 404 Errors
Deployment
Site Deployment
This website was deployed using GitHub Pages by using the following steps:
- I went to GitHub.com and from the left-hand side I clicked on this repository.
- I navigated to the Settings section.
- I scrolled down to the Pages section.
- In the source drop down I selected main, and (root) and then clicked save.
- This proceeds to generate a site using this repo.
- I waited 10 minutes to allow the site to load, then after waiting a link appeared that brings us to the live site.
Advice Slip API
Information on how to use this API was found here: AdviceSlip
Email JS
Information on how to use Email JS through submitting a form was found here: Email JS - Creating a Contact Form
Credits
Images
- email_sent.png by Sara on StockVault - Image on external site
- 404.jpg by RawPixel - Image on external site
Audio
- click.wav by annabloom on freesound.org - Audio on external site
- correct.mp3 by LittleRainySeasons on freesound.org - Audio on external site
- incorrect.wav by GabrielAraujo on freesound.org - Audio on external site
Quiz Contents
The contents for all the quizzes was sourced from W3CodingSchools Please find all their quiz pages here:
- Beginner HTML
- Beginner CSS
- Beginner JavaScript
- Moderate HTML
- Moderate CSS
- Moderate JavaScript
- Expert HTML
- Expert CSS
- Expert JavaScript
Code
- HTML and CSS by Jon Duckett - Used to broaden my knowledge in HTML and CSS
- JavaScript & JQuery by Jon Duckett - Used to broaden my knowledge in JavaScript
- W3Schools - CSS Colors HSL - Used to broaden my knowledge in CSS Colours and HSL
- Mozilla - CSS Custom Properties - Used to broaden my knowledge in using JavaScript properties
- Smashing Magazine - Using HSL Colors in CSS - Used to broaden my knowledge in how to use HSL Colours in CSS
- W3Schools - Array sort() - Used to help me understand the sort() function
- W3Schools - Arrow Function - Used to help me further understand the arrow function
- W3Schools - CSS Tooltip - Used to help me build a Tooltip using CSS
- Mozilla - Custom Validity - Custom Validity taken from this webpage
- Stack Overflow - Disable Buttons - Used to help me fix my errors with buttons
- AdviceSlip - Used to help me write the code for this API.
- Email JS - Creating a contact form - Used to help me write the code for form.js.
Acknowledgments
I would like to thank:
- Mo Shami, my mentor throughout the project, who has proved me valuable information.
- My partner, Harry, who has continued to be very supporting throughout this process and clearly cares so much about my success <3 You're great.
- Anybody who has taken the time to ask how my coding journey is going :).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
