Do you know?! Is a JavaScript game built to allow users to play a game where they can show their knowledge in a quiz based on geography. This game was built to work like an original quiz test and can be played by a single player at the time.

The live website can be found here.

A site wide favicon will be implemented as question mark.

This will provide an image in the tabs header to allow the user to easily identify the website if they have multiple tabs open.

A 404 page will be implemented and will display if a user navigates to a broken link.

The 404 page will allow the user to easily navigate back to the main website if they direct to a broken link / missing page. With the need of the browser back button.

A button will be on the home page that when clicked will direct the user to the main quiz game This will allow the user to start the game after they read and understand how the game works.

The user has 4 different methods of answers where they can choose the correct option. If the user selects the right answer, this will receive a point and the right answer will become green. If the user clicks a wrong answer, the wrong answer will become red and the right answer will be revealed.

• Preview before a button was selected

• Wrong answer was selected, and the right answer will be revealed.

• The right Answer was selected.

Underneath every selected answer the user can have an overview over the number of questions he has completed. Once the user complete 10/10 questions he will be prompted to the final score.

The final score will be presented to the player and a personal message will be prompted.

The final score section has a button which permits every user to start a new game where they can achieve a higher score than before.

• Add the global time to inform the user of the actual time in his time zone.
• Add a timer for each question, where the user has to answer a question in a limited time.
• Animate the questions for a better overview and interactive to the user.
• Game Sounds.

1. Home page (start page).

2. Game page.

3. End game page.

4. 404 page.

– The structure of the website was develop using HTML.

• The Website was styled using custom css in an external file style.css.

– The game play logic was created using javaScript in 2 different external files.

– Source code is hosted on GitHub and deployed using GitPod / Git pages.

– Icon obtained from https://fontawesome.com was used within the body element.

– Favicon files were created at https://favicon.io/favicon-converter/

– Wireframes were created using balsamiq from https://balsamiq.com/wireframes/desktop/#

All pages were tested to ensure responsiveness on the screen sizes from 280px and upwards as defined in the WCAG 2.1 Reflow criteria for responsive design on chrome, edge, Firefox and opera Browsers.

Step to test:

1. Open browser and navigate to (add link)’Do you know?!’ (Geography quiz).

2. Open the developer tools (right click and inspect)

3. Set the responsive and decrease width to 280px

4. Set the zoom to 50%

5. Click and drag the responsive window to maximum width.

Expected:

Website is responsive on all screen sizes and no images are pixels or stretched. No horizontal scroll is present. No elements overlap.

Actual:

Website behaves as expected.

Website was also opened on the following devices and no responsive issues were noticed:

• iPhone 12 PRO
• iPhone 13 PRO
• iPad Pro
• Oukitel C12 Pro
• TCL 30 Pro
• iPhone SE
• Laptop
• Desktop
• TV via HDMI

Wave Accessibility tool was used throughout development and for final testing of the deployed website to check for any aid accessibility testing.

1. First Page.

2. Start Page.

3. Submit Answer

4. 404 Page

Testing was focused to ensure the following criteria were meet:

• All forms have associated labels or aria-labels so that this is read out on a screen reader to users who tab to form inputs.
• Color contrasts meet a minimum ratio as specified in WCAG 2.1 Contrast Guidelines.
• Heading levels are not missed or skipped to ensure the importance of content is relayed correctly to the end user.
• All content is contained within landmarks to ensure ease of use for assistive technology, allowing the user to navigate by page regions.
• All not textual content had alternative text or titles, so descriptions are read out to screen readers.
• HTML page lang attribute has been set.
• Aria properties have been implemented correctly.
• WCAG 2.1 Coding best practices being followed.
• Manual tests were also performed to ensure the website was accessible as possible and some accessibility issues were identified.

Testing was performed to ensure all navigation links on the respective pages, navigated to the correct pages as per design. This was done by clicking on the navigation links on each page.

Navigation link Page to load Home index.html

Links on all pages navigate to the correct pages as expected.

The footer was not implemented as the game doesn’t have all the elements implemented. The footer will be implemented once the website will be ready to be distributed outside GitHub pages.

• HTML No errors were returned when passing through the official W3C validator

• Home page

• 404 page

• CSS

No errors were found when passing through the official (Jigsaw) validator

• JavaScript

No errors were returned when passing through the JShint validator

JavaScript (script.js)

JavaScript (questionnaire.js)

• Lighthouse Report

The following git commands were used throughout development to push code to the remote repository:

• git add
• This command was used to add the file(s) to the staging area before they are committed.
• git commit -m “commit message”
• This command was used to commit changes to the local repository queue ready for the final step.
• git push
  • This command was used to push all committed code to the remote repository on github.

• The site was deployed to pages. The steps to deploy are as following:
• In the GitHub repository, navigate to the Settings tab.
• From the menu on left select 'Pages'.
• From the source section drop-down menu, select the Branch: main.
• Click 'Save'.
• A live link will be displayed in a green banner when published successfully.
• The live link can be found here.

Navigate to the GitHub Repository you want to clone to use locally:

• Click on the code drop down button.
• Click on HTTPS.
• Copy the repository link to the clipboard.
• Open your IDE of choice. (git must be installed for the next steps)
• Type git clone copied-git-url into the IDE terminal. The project will now be cloned on your local machine for use.

1. The ReadMe file has been realized inspiring from https://github.com/Gareth-McGirr/Portfolio-Project-2-Poker-Fun
2. My mentor Daisy McGirr for her guidance and support throughout my project.
3. My colleagues from Slack and the study_group who helped me to find 2 issues and fix them.
4. To W3Schools a platform that helped me to clarify some not understanding about Js.
5. To Simple Steps Code for the idea of creating this website https://simplestepscode.com/javascript-quiz-tutorial/
6. The Quiz idea was inspired from https://meldissa.github.io/p2-movie-quiz/