Live Webpage

1. Introduction
   1. Background
2. Objectives
   1. Site Visitors
   2. Site Owners
3. User Stories
4. Website Design
   1. Layout
   2. Colour Choices
   3. Wireframes
   4. Structure
   5. Font
5. Feautures
   1. Simplistic Design
   2. Categories Covered
   3. Menu
   4. Site Navigation
   5. Question Randomistion
   6. Timeout
   7. Social Media
   8. Upcoming Categories and Newsletter
   9. Feedback
   10. Don't Cheat Button
   11. Timer and Score Counter
   12. Form Validation
   13. Future Ideas
6. Testing
   1. HTML Validation
   2. CSS Validation
   3. JavaScript Validation
   4. Performance
   5. Accessibility
   6. Browsers
   7. Devices
7. Unfixed Bugs
8. Deployment
9. Technology Used
10. Credits
    1. Content
    2. Media
11. Final Thoughts

"Feeling "Quizzy" is a fun, interactive, multi-choice answer quiz website. In keeping with the tradition of pub quiz team names being pun based, "Feeling Quizzy" is based phonetically off the phrase "feeling dizzy".

The overall tone of the website is lighthearted and sometimes tongue-in-cheek. The purpose of the website is to provide a fun and interactive experience for the user, while at the same time possibly being educational.

The quiz itself consists of 20 questions from four different categories with four possible answers. In all cases, only one answer is correct, however, some of the answers themselves are ficticious.

To provide a level of difficulty and uncertainty, some answers, such as year numbers, are deliberately similar. This is to make the user second guess themselves on an answer they would have initially been confident of.

The objectives of the site visitors can be split into two categories:

1. First Time Visitors;
2. Return Visitors.

• May wish to test themselves for fun.
• May wish to practice for an upcoming pub quiz where real prizes can be won.
• Can take the quiz to educate themselves on the categories covered in the questions.
• Can use the quiz with friends at parties they host/attend.
• May play the quiz to pass their time leisurely e.g. if travelling on public transport or in a waiting room.

In addition to having the same objectives as First Time Visitors, Returning Visitors:

• May attempt to better their previous score.
• May attempt to better their previous time.
• Can check if new questions or categories have been added.
• Can sign up for a an email newsletter to receive updates.

The objectives of the site owners are:

• To provide a quiz in a format that is generally accepted and familiar to the public.
• To provide an enjoyable experience for users.
• To provide an interactive experience to users.
• To to provide a fun, and at times, humourous experience to users.
• To educate users on categories they may not be strong with.
• To provide reusability of content.
• To receive detailed feedback from users.
• To encourage users to sign up for the email newsletter, which has potential for commericial purposes, such as advertisement or future merchandise selling.

1. As a first time user, I want to know what the purpose of the website is.
2. As a first time user, I want to know what categories are covered in the quiz.
3. As a first time user, I want to know what is the tone of this website and is this quiz going to be fun.
4. As a first time user, I want to know is the website easy to use.

5. As a returning user, I want to know if the questions are in the same order.
6. As a returning user, I want to know if what happens if I run out of time.
7. As a returning user, I want to know if the site owners have a social media presence and how can I find it.
8. As a returning user I want to know if the future categories are being updated.
9. As a returning user, I want to know if I can receive updates without visiting the website.

10. As a site owner, I want to my website to be visually appealing and easy to navigate.
11. As a site owner, I want users to know that the tone of this website is lighthearted and tongue-in-cheek.
12. As a site owner, I want to update users with upcoming categories.
13. As a site owner, I want to gather important feedback from users.
14. As a site owner, I want to encourage users to sign up for the email newsletter.

Quiz websites should be simple and easy to navigate. The steps to start and finish a quiz should be obvious and the answer buttons should be large and appropriately spaced so that distinct answer selection is not a problem.

With too many features or complexes designs, a user may be put off, and may seek an alternative quiz option. The internet is full of interactive quizzes to choose from, so simplicity of design and execution is important to not only encourage game commencement, but also repeat visits.

The website consists of four pages:

• Home Page
• Quiz Page
• News and Feedback Page
• Timeout Page (should the user not complete the quiz in the alotted time)

The main colours used in the website are a blue/navy colour called rgba (25, 50, 190, 0.75), and a standard Light Blue with Whitesmoke borders on the buttons. These colours are in honour of the Dublin GAA jersey colours, as I'm from Dublin in Ireland.

rgba (25, 50, 190, 0.75)

Dublin Jersey

The traffic lights colours of Red, Gold, and Limegreen were used for hovering over buttons and button clicks.

A second light purple/pink colour was used to provide some additional variety and distinction, without being visually jarring. This colour is called rgba (208, 71, 107,0.95).

rgba (208, 71, 107, 0.95)

Whitesmoke background was used again on the footer to alert the user to the bottom of the page and its social media links.

Each page structure is similar with the main purpose of the page in a large heaidng at the top and a social media footer at the base. The main content (menus, answers, forms) are centrally located. This consistency ensures a positive visitor experience as the visitor never has to go looking for something; information is always where it is expected to be.

The symmetry of the four current categories on the home page and the four upcoming categories on the newsletter sign up page serve as "book-ends" to the website.

Wireframes were created using the programme Balsamiq.

Home

Quiz

Form

Timeout

Roboto from Google Fonts is used for the website. Alternative fallback font used is Sans-Serif.

-Due to the simple design and layout of the website, user's know immediately what purpose and objectives of the website are. -The website name is declared large and centered in the users view, and greets them with the immediate challenge of testing their knowledge.

• User stories satisfied: Number 1, 2, 4, 10

• A list of catgories covered in the quiz are present on the home page.
• Pictures accompany the list and Font Awesome icons were added to the list items.
• User stories satisfied: Number 1, 2, 10

• The colours used throughout the website indicate a lighthearted and fun tone.
• The language used on the menus is familiar and colloquial, so as to not seem to formal or serious.
• The 'I'm Ready To Test Myself!!"
• The "Let Me Check Something First..." menu option brings the user to an external Google home page, the joke being that as you never know what will show up on a quiz, it's impossible to study for. -The "This Might Be More My Speed..." menu option brings the user to an online drawing and colouring app, jokingly suggesting they may not be intellectually capable for what in reality is a simple straightforward quiz.
• User stories satisfied: Number 3, 11

• With bright colours, large fonts, and centralised large buttons,the site is very intuitive and easy to navigate.
• User stories satisfied: Number 4, 10

• Return users will note that the questions bank is randomised each time a new game is started. This adds some element of variety and resusablity before the quiz is updated with new categories/questions.
• User stories satisfied: Number 5

• Initially, the quiz consists of 20 questions from four categories with four possible answers to each question.
• The game itself is limited to 10 minutes to maintain user attention and discourage cheating.
• Once the timer reaches zero, and if all the questions are not yet answered, the user will be brought to the Timeout Page where they can return to the main menu.
• User stories satisfied: Number 6

• Social media linke are present at the footer of each page for easy access.
• Icons were sourced from Font Awesome.
• User stories satisfied: Number 7

-The Upcoming Categories section informs users of future categories that are to be added to the website. -The plan would be to initially update on a monthly basis, subject to feedback and engagement.

• Signing up for the monthly newsletter is encouraged.
• The newsletter via email enables the site owner to update users without them having to visit the website and could potentially be used for commerical purposes, such as advertising and/or merchandise.
• User stories satisfied: Number 2, 8, 9, 12, 13, 14

• The newsletter also allows the user to provide feedback/comments to the site owner, which could be invaluable in terms of improving the sites offering and/or interactivity/functionality.
• User stories satisfied: Number 13, 14

• As a pyschological joke, I've included a "Don't Cheat" button on the main quiz page.
• Clicking the button does not pause the timer or offer any advantage but calls out the user for trying to cheat with a pop up. Just a small feature to make the user smile. -User stories satisfied: Number 3, 11

• Both features allow the user to track their progress.
• User stories satisfied: Number 6

• When filing out and submitting the feedback form, if the email address is correctly validated, a green pop up acknowledgment appears under the form. -Similarly, if the email address is not correctly validated, a warning message appears. User stories satisfied: Number 13, 14

• Future ideas would be to incorporate new types of questions and challenges
• To add additional questions to existing categories
• To new categories with questions

Testing was conducted over seven main categories:

1. HTML Validation
2. CSS Validation
3. JavaScript Validation
4. Performance
5. Accessibility
6. Browsers
7. Devices

Each of the below four webpages were tested in the above categories:

1. Home
2. Quiz
3. News and Feedback
4. Timeout Page

The HTML of each webpage was passed through the W3c HTML Validator Website. Each page returned no errors.

Home

Quiz

Form

Timeout

Each webpage was passed through the W3C CSS Validator Website also known as "Jigsaw". Each page returned no errors.

Home

Quiz

Form

Timeout

Script.js was passed through JSHint JavaScript Validator. While 46 warnings were present on the report, these relate to the use of basic JS syntax such as "let", "const", and similar. Warning advises me to use Mozilla JS extensions. Unsure if this is because the local computer on which I run Gitpod through is running Windows 8 operating software. This does prevent me from using VS Code Editor on my desktop. I would not be able to write JS code without using the syntax for which I am being warned for. There were no significant errors.

script.js

The Lighthouse feature in Google Chrome Developer Tools was used to test the performance of each webpage.

Home

Quiz

Form

Timeout

The WAVE Web Accessibility Evaluation Tool was used to test the accessibility of the website. No errors were returned on any page.

Home

Quiz

Form

Timeout

All webpages have been tested on the following browser:

• Google Chrome

• Correct and incorrect button classes don't change the background colours when correct or incorrect answers are clicked on

All webpages have been tested on the following devices:

• Lenovo Z50 laptop
• OnePlus 7 mobile phone

This website was deployed using Github Pages. The steps for deployment on Github Pages are as follows:

1. Select Github repository: IcemanMick/ci_pp2_feeling-quizzy.
2. Click "Settings" option on the navigation menu.
3. Scroll down through the settings to the "Github Pages" section and click on it.
4. On the source section "Branch Menu", click on the drop down menu and select "Branch: Main".
5. Once clicked, an URL to the website will appear.
6. Please note, it may take a few minutes to load, but the link will work and bring you to "FeelingQuizzy" website.

Please find a live link to the website above the Table of Contents title on thie README.md and additionally here:

• Git
• GitHub
• GitHub Pages
• Gitpod
• Balsamiq
• HTML
• CSS
• JavaScript
• Google Chrome
• Internet Explorer
• Safari
• Font Awesome
• Google Fonts
• Snipping Tool
• Pexels

• Quiz Code where credited in files to Youtube of Brian Design and his Github
• Timer Code where credited in filed to Youtube of Florin Pop
• Alert Box Code where credited in files to Youtube of Adam Khoury
• Basic Confirmation Boxes where credited in files from Youtube of Tony Teaches Tech
• Love Running and Coders Coffeehouse where credited in the files by the Code Institute
• Arrow Functions by Web Dev Simplied
• Common Mediq Queries Sizes of 768px and 480px by freeCodeCamp
• What is e in JavaScript from StackOverFlow

All photos from Pexels

• Mountains Photo by Sagui Andrea
• Sphinx Photo by Arralyn
• Laboratory Photo by Chokniti Khongchum
• Runner Photo by Pixabay
• VR Headset Photo by Harsch Shivam
• Cinema Photo by Nathan Engel
• Concert Photo by Wendy Wei
• Vote Photo by cottonbro
• Confused Man Photo by Sammie Sander
• Dublin Jersy from Elvery's Sport

Given that this was my first project using JavaScript, it did not go as well as I'd hoped. A lot of features I wished to add did not happen as I could not get the code to work. But as they say, calm seas a good sailor never made!

Positives to take away have been getting more comfortable and better with using HTML and CSS, as well as Chrome Developer Tools.

I'd like to thank:

• My mentor Mo Shami, as always, for his support and guidance.
• My loving family and girlfriend.
• Caffeine for getting me through the long nights and early mornings.