Kieran's Car Quiz - KCQ 🚘

Kieran's Car Quiz is a fun, responsive car quiz that is designed to both engage and interact with the user. The site was designed to demonstrate a variety of different JavaScript functions.

The user is asked a series of questions and their score is calculated in the top right hand corner. The website interacts with the user and changes the colours of the body and the options to show if the answer was correct or not. A randomized message is displayed to the user after each answer alongside their result. The user is shown their total score at the end of the game and given the option to try again.

Live Site Link 🚗 🔰

https://kc-7.github.io/car-quiz/

Technologies 🌐 🛠

The following technologies were used to develop this site:

HTML - is used to structure the website.
CSS - is used to style the website.
JavaScript - is used to make the website interactive.
Google Fonts - is used to import additional fonts.
Font Awesome V5 Icons - is used to import icons.
GitPod - is the platform used to develop the site.
GitHub - is used to host the website.
Markdown - is used to format the readme file.

Features 🎲 🎮

Header Bar 👦

There is a header bar located at the top of the page that displays a logo, header text and score bar.
The score is only displayed once the quiz has sorted. It displays the total number of correct answers, total number of questions asked and total number of questions in the quiz.

The header text is not displayed on smaller devices and the logo is changed to an alternative design that is better suited to smaller devices.

Collapsible Window 🔽 🔼

There is a collapsible window below the header bar.
When the user expands the collapsible window, they are presented with text relating to the quiz and the CSS validation link.
If the user is on a device with a larger screen width, a QR code will be displayed to give them the option to try the quiz on a mobile device.
The collapsible window button text is adjusted when the div is opened & closed to prompt the user to interact with it.

Welcome Screen 👋 ⏯

The user is greeted by a streamline quiz home page below the collapsible window.
The user is able to start the quiz by pressing the "Engine Start" button.

Question Screen ❓ 🖱

The question is then displayed alongside the potential answers. The number of options and order of questions varies. The Start Game button is hidden.

Result Screen 🎰 ✅ ❌

When the user selects an option, there score is updated and displayed in the right hand side of the header bar.
The site will scroll down to the next button if required so the user knows that there is more content on the page, it scrolls back up to the top of the page when the next question button is selected.

The incorrect options ❌ are displayed in red and the correct answer ✅ is in green.

The background colour of the body is changed to dark green or dark red depending on if the user answered correctly.

The user is alerted below the question options to whether they have answered correctly or not.

The text is set to change at random based on a pre-set array for both the correct and incorrect answers.
The next question button is displayed and when clicked it brings the user to the next question which is chosen at random.

End Screen ⏹ 🔄

When the user completes the array of questions, they will be alerted that they have made it to the end of the quiz after the section displaying their final result.

The start button is then displayed with the text "Try Again" and when selected it will reset the score counters and the question index back to the start.

Footer 👟

The footer is displayed at the end of the web page. It is static on larger devices but is set to stay in line with the web page instead of the browser window on smaller devices.

Responsive Design 📱 💻

Media queries were used for responsive design so that the site is aesthetically pleasing on a variety of different device sizes.

Favicon

A favicon is utilized to display the site's alt logo in the browser tab.

Features Left to Implement 🆕

A submit button could be displayed after the user selects their chosen option, this would give then the option to change their mind if they selected the wrong button by mistake before their choice is submitted. When they click submit, the button would then be replaced with the next button. This would give the user an opportunity to review their score before proceeding to the next question. 💪
Additional difficulty levels could be set up asking the user an array of more difficult questions. 💬
A timer feature could be implemented. ⏱ ⏳
Sounds could be utilized for user feedback. 🔊
Add additional pages such as contact, 404, etc. 📝
Consider restyling the website so all content is displayed within all screen sizes and remove auto scroll / focus features. This could be achieved by getting the result to pop up in front of the current options instead of below them and by utilizing media queries. 📱 💻
Add option for users to enter a username and save all scores. 🔤

Design ✍ 🆒

The site was designed to demonstrate a variety of different JavaScript, CSS and HTML techniques.
The sites aim is to get a positive response from the user. The site targets male and female users aged between 16 and 66.
Basic sketches and flow charts were created prior to coding.
The JavaScript is set to function in a set order. Certain elements are set to randomize to provide a unique user experience.
The site was styled using the below colour scheme that I created on Coolers.

The site's main and alternative logos were created to enhance the sites appearance and create a professional UI.

Testing 🔧

Test Cases 🕵

HTML - W3C Validator 🏸

The website passed the W3C HTML validator check with no issues.

CSS - Jigsaw Validator 🏸

The webesite passed the Jigsaw CSS Validator check with no issues.

JS - JSHint Validator 🏸

JSHint was used to review the JavaScript code.

Google Inpsect 🏸 - Check HTML, CSS, JS, Log & Lighthouse reports. 🖱 💡

I used console.log()'s during development and testing to ensure all functions were being called correctly. These were removed once testing was completed. Snip from testing below.

I analyzed the page load on both mobile and desktop devices using the Google Inspect Lighthouse Report Feature and received full 100% marks for all criteria; Performance, Accessibility, Best Practices and SEO.

I used the element inspect feature to assist with styling.

Responsive Design & Visual Testing - Google Inspect & AmIResponsive 📱 💻 🖥

Visual testing was mainly carried out using the Google Chrome Inspect tool. I tested all sections of the site on a combination of different screen sizes.
I carried out visual testing on the following device sizes using Google Inspect:
- iPhone SE: 375 x 667 px
- iPhone XR: 414 x 896 px
- iPhone 12 Pro 390 x 844 px
- Pixel 5: 393 x 851 px
- Samsung Galaxy S8+: 360 x 740 px
- Samsung Galaxy S20 Ultra: 412 x 915 px
- iPad Air: 820 x 1180 px
- iPad Mini: 768 x 1024 px
- Surface Pro 7: 912 x 1368 px
- Galaxy Fold: 280 x 653 px - Note, this is the smallest device size the site has been designed to operate on
- Nest Hub: 1024 x 600 px
- Nest Hub Max: 1280 x 800 px
Visual testing was also carried out using Am I Responsive. The responsive image examples shown above were taken from this website. 📱 💻 This site provides simulations in the following sizes:
- Desktop: 1600 x 992 px - scaled down to scale (0.3181)
- Laptop: 1280 x 802 px - scaled down to scale (0.277)
- Tablet: 768 x 1024 px - scaled down to scale (0.219)
- Mobile: 320 x 480 px - scaled down to scale (0.219)

I physically tested the site on the following devices:
- Dell Monitor - 24": 1920 x 1200 px 🖥
- Lenovo Yoga 910 - 14" (4k): 3840 x 2160 px 💻
- Samsung Galaxy S10 - 5.8": 360 x 760 px 📱

Fixed Bugs ✔ 🕵 🕷

JSHint flagged issues such as missing semicolons which were then removed.

Minor HTML Issues were highlighted during the initial test and addressed as required.

I had an issue where the next button was being displayed below the start again button, I resolved this by correcting the JS function.

I initially used alerts to display the answer and end of quiz results. I changed these alerts to show inside the quiz in case the user has a pop up blocker installed on their browser, in which case, the alerts would not work and be seen as a bug.

I shared the quiz for testing and was informed that it was not obvious that the next button was displayed lower than what was being displayed on the browser after selecting an option. I addressed this by implementing a Focus Function to send the user to the next button and a Scroll To Function to get the user back to the top of the page.
I also received feedback that when the user clicked on the collapsible window, it was not obvious how to close it. To address this issue, I set the inner text to change when the collapsible area is opened or closed to prompt the user to interact with it.
I was not able to disable the quiz option buttons initially, this is because I needed to target the elements inside of the array instead of the class group directly.

Unfixed Bugs ✖ 🕵 🕷

I was not able to identify any further bugs during final testing. ✔ 🐛 🐞 🦗

Deployment 🌐

GitPod 🔧 ⌨

I developed the site using HTML and CSS in GitPod.
I ran a local sever each time I was viewing & editing it by typing the below into the terminal:
- python3 -m http.server
For version control, I regularly updated my work to GitHub by entering the below commands into the terminal:
- git add .
- git commit -m "Update message here"
- git push

GitHub 🌐 🖱

The site was deployed using GitHub pages:

In the GitHub repository, navigate to the Settings tab.
From the source section drop-down menu, select the Master Branch.
Once the master/main branch has been selected, you will then see your link to your site.
The live link can be found here: https://kc-7.github.io/car-quiz/

Credits 🥂 🙏

This site was developed using information learned from the Code Institute alongside other online resources such as W3Schools & Stack Overflow.
The Code Institute's Gitpod Full Template was used as the initial template for the project. The repository is available on their GitHub Account.
The walk through project I completed with the Code Insitute, Love Maths, was a good source to reference for information such as updating scores.
I watched JavaScript tutorials on YouTube and found Web Dev Simplified's channel very helpful when learning new skills, particularly his video on building a quiz.
I learned how to implement the Favicon, the picture in the browser tab, from using W3Schools' guide on implementing this feature.
I learned how to implement the collapsible area from using W3Schools' guide on implementing this feature.
I learned how to implement the smooth scroll function, the effect that scrolls down to the area being navigated to instead of jumping to it, from using W3Schools guide on implementing this feature.
I learned how to implement the Focus and Scroll featues in JavaScript using Developer.Mozilla.Org .
Fonts added using Google Fonts.
Icons added using Font Awesome | Free V5 Icons.
The resposive images in the readme were taken using Am I Responsive.
The animated gif in the readme was created using Imgflip's free gif maker
The QR Code was created for free using QR Code Generator .com.
The colour platte was generated using Coolers.
The site logo was created using the Adobe Express | Free Logo Maker.
The social links in the footer and the CSS validator logo all contain links to third party websites.

Thanks for reading! 😃

kc-7 / car-quiz Goto Github PK

car-quiz's Introduction