Exam Practice is a quiz website that helps users prepare for exams. It assists in practicing probable exam questions by presenting them in a question-and-answer format with multiple-choice options. It operates as a time exam, simulating real exam conditions to enhance your mental preparedness. Currently, there are three subjects: Mathematics, English, and Government.

You can find The link to the deployed site Here

As a first-time visitor, the primary goal is to be able to practice past and similar exam questions. I also want to be able to see areas of concentration regarding my weak points and areas where I need to study more. I want to be able to practice on different screen sizes and especially on my mobile phone.

As a returning visitor, the goal should be to practice more and get acquainted with the exam questions.

An input form is made available on start. The username gives the user a personalised experience by displaying their chosen name across the pages of the site.

There are currently subjects offering the website application, namely English, Mathematics and Government.

A timer is activated when a practice session starts. This helps the user to simulate real exam conditions.

The footer section displays the name of the developer and also provides a LinkedIn reference for the developer.

The result page is active at the end of every practice session, showing the score, subject, date, time, username, and list of failed topics of attempted questions. It also provides the user with an opportunity to print the result.

Various tools have been used in testing the overall performance of the website from beginning to end. I have listed them in no particular other below:

Responsive Design Tester by Media Genesis was used to view the website on different media screens. Click any title below to view the site's appearance on the screen.

Computer - Big Screens (1440 x 697)

Laptop - Medium Screens (768 * 697)

Mobile Phone - Small Screens (375 x 697)

The final project was tested on four different browsers, namely: -Microsoft Internet Explorer -Google Chrome -Brave -Mozilla Firefox The output was similar on all these browsers except on Mozilla Firefox, where the fonts appeared darker and were therefore, better viewed in terms of clarity and contrast. I had about 5 alert boxes pop out in the course of using the application, but I discovered that browsers like Mozilla Firefox reacted differently and sometimes cause errors. Therefore, reduced the alert instance to two and used display blocks instead.

Google PageSpeed Insights was used to test the speed of the website and various issues were highlighted which was followed by subsequent adjustments. Issues such as "aria-label" not being present were raised, the absence of meta description which I later found out to be because "Description" was spelled wrongly and issues surrounding image size not being stated.

• Desktop PageSpeed Result
• Mobile PageSpeed Result

The JSHint code quality tool was used and 69 warnings were detected. There were no errors, and the warnings were not harmful with most being a result of browser compatibility.

1. The W3 validator (validator.w3.org) highlighted errors on the website's links. Arial-label instead of aria-label had been used, and 15 errors were found and corrected.
2. An "" was found without an opener on the footer.

1. The W3 validator highlighted 1 error regarding the use of a wrongly written code for align-items. A value of "right " was used rather than centre or start. These codes were then rewritten correctly.
2. The validator highlighted 3 warnings regarding using codes that are vendor-extended pseudo-element.

WAVE is a web accessibility evaluation tool powered by WebAIM. WAVE helped identify an initial error where h3 was used without "h2" element being in sequence. It also highlights an issue with the te4xt alignment (Justify) used. These errors were then corrected. In the second test, no major accessibility error was found except for a minor contrast error concerning the orange color of a part of the logo that's against a white background.

Deque's University Color Contrast Analyzer was used to determine what colors go together This ensures that users of all kinds can clearly view texts and image/button borders. Some users might be color blind or are people with low vision experience. This tool ensures that the best colours are used in other to guarantee their convenience. A brief understanding of this would be an instance where white text is put on a yellow background. Both colors are too bright and would be difficult to read for most users.

Freeform was used to draw mock-ups for the initial website design to guide the development of this project.

• JavaScript was used as the main scripting language for the website
• HTML was used to create the frame and for basic text.
• CSS was used to add styles and layouts to the website.
• Freeform was used to create wireframes to pre-deign and guide the site's layout and designs
• VScode was used to write and edit the codes and host the site on my local computer
• Git was used for the version control of the website
• GitHub was used to host the deployed website
• Undraw opensource was used to obtain SVG image for the hero image
• Canva was used to create the site logo

The site was deployed using Github and was pushed through via Vscode. The repository was created on GitHub and then cloned on Vscode. After creating the site on Vscode, it was pushed onto Github. The site was then deployed via Github pages by:

- Selecting the settings tab inside the repo on GitHub
- Selecting Deploy from a branch under 'Build and deployment'
- Selecting Main under branch
- Click save

After these steps, the site would have been deployed and become live at https://dcsndevs.github.io/exam-practice

To clone this project, you can do so using VsCode or any code editor that has an integrated development Environment (IDE), using this command:

 git clone https://github.com/dcsndevs/exam-practice.git 

W3schools was instrumental to the success of this project. It was often used to learn quick features or to compare and see where errors are.

The questions used in this project were gotten from past questions of the Unified Tertiary Matriculation Examination in Nigeria.

• Inspiration for creating the countdown timer was gotten from Florin Pop's YouTube video. Florin Pop

The fonts used were imported from Google Fonts and the Icons from Font Awesome Regular 400 Font Borel (logo), Ubuntu (paragraphs), and Ruwudu(headings) were used.

Black, Orange and Teal were the main colors used for this site.

• The main hero image of a character studying a book was gotten from a free open-source site (Undraw.co) designed by Aggelos Gesoulis and created by Katerina Limpitsouni.

• The logo was created using Canva.com

• Image Resizer and TinyPng were used to respectively resize and compress all the images on this site.

• Screenshot & Screen Recorder was used to record live tests and used to create videos

• Am I Responsive website was used to simultaneously display how the site looks on different screen sizes.

I like to thank Juliia Konn, my mentor at Code Institute. She exemplifies her mentorship with a knack for high-quality projects. Her desire for quality has always challenged me to do better in my work. I remain grateful to her.

I also like to thank my loving wife for her continuous support. She's a source of strength as always.