The idea behind this project, was to have a quiz for football lovers to try their knowledge about the game. The questions here are from the 2022 FIFA World Cup hosted by Qatar and there are 10 questions. After adding your username as requested, you are taken to the quiz. For each question you get right a check mark to support your answer shows besides it and correct answer counter shows what number of answers you got right below, while "X" for wrong answer choices and incorrect counter shows likewise. At the end, your total score is presented to you, and you are requested to provide feedback thereafter.
-
First Time Visitor Goals
- As a first time visitor, I want to know the purpose of this site.
- As a first time visitor, I want navigate the site intuitively.
- As a first time visitor, I want to look for testimonials to know what others think.
-
Returning Visitor Goals
- As a returning visitor, I want to see what changes/ improvements have been made to the site.
-
Frequent User Goals
- As a frequent user, I want to see if new quiz questions have been added.
- As a frequent user, I want to see if the comments of users impact changes on the site.
The choice of color, typography and images, used were chosen for simplicity and, also for how visually appealing they can be to site users.
- HTML5
- CSS3
- JavaScript
There is one navigation included in this site. It is linked to the send button-like div to receive users feedback. Once that "send" is clicked it navigates to the index page.
A main photo is used in the index page to capture the users attention, expecially as it is the official logo of the 2022 FIFA world cup held in Qatar.
This page engages with our site users, by providing information about the quiz, which helps our users exercise their wits.
The quiz section is on the index page...just hidden, only to be revealed when the user enters a username. The user has to scroll down to access othe quiz questions.
The feedback section exists to get users reaction and possible ideas to improve the quiz page.
- Make th quiz display one by one, with the next page coming up once the user clicks next.
- Add more questions and include quiz from othe world cup years.
- Add testimonies of users who take the quiz.
I have checked to confirm that the user cannot access the quiz without providing a username.
I have ensured that this project is responsive on all screens.
-
First Time Visitor Goals
- As a first time visitor, I want to know the purpose of this site.
- Every first time visitor can clearly see that this is a FIFA world cup quiz site.
- The site is there to test their sports knowledge about football.
- As a first time visitor, I want navigate the site intuitively.
- Navigating the site is very intuitive, as how to navigate the site is easy and, the needed response from users are clear and unambiguous.
- As a first time visitor, I want to look for testimonials to know what others think.
- At the moment testimonies of users are not public yet. That is currently under consideration.
- As a first time visitor, I want to know the purpose of this site.
-
Returning Visitor Goals
- As a returning visitor, I want to see what changes/ improvements have been made to the site.
- Further changes are currently under consideration, however, there is no specific time for their implementation.
- As a returning visitor, I want to see what changes/ improvements have been made to the site.
-
Frequent User Goals
- As a frequent user, I want to see if new quiz questions have been added.
- No new changes to the site yet.
- As a frequent user, I want to see if the comments of users impact changes on the site.
- It certainly will. However, implementation is yet to take place.
- As a frequent user, I want to see if new quiz questions have been added.
- HTML: No errors or warnings shown when passed via the official W3C validator:
- CSS: No errors shown when passed via the official (Jigsaw) validator:
-js: No errors were found.
-Lighthouse audit: Archieved 100% accessiblity, best practices and SEO checks. However, the site performance is at 74% - the lowest. This issue has to do with my chrome extension.
- I was'nt able to call the user's name entry before telling them their quiz score. This issue was based on the variable assigned to the name entry being block scoped. I fixed this issue by declaring the variable outside the scope making it a global varaiable.
- Yet to fix my chrome extension issues affecting the site's performance rating.
- Github: To Store Repository
- Codeanywhere: To Create the html and css files
- Google Fonts: Font-family 'Open Sans' and fallback "sans serif"
- Google Chrome Dev Tools: For testing.
- Microsoft Edge: Alternative browser for site testing
- Font Awesome: Social media icons
- Am I Responsive: Getting image of how the webpage renders on different screen sizes.
The site was deployed to GitHub pages. The steps or deploy are shwon below:
- Go to GitHub repository, click on the project.
- Click 'settings' and also click 'Pages'.
- Select 'Main' from drop-down menu under branch, and click save.
- A link to the live page will appear .
The live link for this site can be found here -link
I wish to thank my mentor Martina Terlevic for all the support so far, and to Code Institute and its slack community, I say a big thanks.
- The tools to make this page come alive comes from Code Institutes Love maths, love running walkthrough project and Aerobic yoga project 1.
- I acknowledge Code Institute's sample README and Tulkerfaulk for the readme file structure.
- The correct and incorrect scores counter code was gotten from love maths.
The quiz content was sourced from : FIFA
Images:
The FIFA trophy image was sourced from : Google search
The offial 2022 world cup image was sourced from : Google search
The faveicon was sourced from : Flaticon