Frontend Quiz App

The Frontend Quiz App was built as a responsive and interactive web application designed to provide users with the ability to test their knowledge on various subjects. This app was developed using modern frontend technologies and adheres to best practices in user experience (UX) and user interface (UI) design. The app's functionality includes subject selection, answering multiple-choice questions, real-time feedback on user responses, and the ability to restart quizzes. The project was guided by the challenge to match a provided design closely while implementing key interactive features.

Live Site: https://abiodunolaoluwa.github.io/quiz-app

Users can choose a quiz subject from multiple available options, sourced from a local data.json file.

This enables personalized quiz experiences, making the app more engaging and relevant to a wide variety of users.

Each quiz consists of multiple questions with four possible answers per question. Users can only select one answer.

Answer validation is built-in to ensure that the user cannot submit a question without selecting an option, providing a seamless experience.

The app tracks the user’s current progress through the quiz, and once all questions have been answered, the user is taken to a completion screen showing their final score.

At the end of each quiz, users receive a summary screen that displays their score, based on the number of correct answers.

Users can replay the quiz by selecting a new subject or retaking the same one, offering multiple replays for continued learning and enjoyment.

The entire application is designed to be fully responsive, ensuring a consistent and optimal experience across all devices, including desktops, tablets, and smartphones.

Media queries and flexible layout techniques (CSS grid and flexbox) were used to create an adaptive interface.

Visual cues, such as hover and focus states, were implemented to indicate actionable elements, enhancing usability for both keyboard and mouse users.

If a user attempts to submit a question without selecting an answer, an error message is displayed, ensuring that users are guided through the process correctly.

This improves the overall user experience by preventing incomplete submissions.

The development process began with setting up the project environment and reviewing the project requirements provided in the README.md file.

I carefully analyzed the data.json file, which provided the necessary content for each quiz subject and question, ensuring that it could be dynamically loaded into the app.

I designed the interface to closely match the provided design, ensuring that all visual elements were implemented according to the challenge’s guidelines.

CSS was used for styling, with particular attention paid to layout responsiveness and adapting the interface for different device sizes.

The app leverages the local data.json file to populate quizzes with dynamic content. This data was loaded and managed within the app’s state, making it easy to update the quiz content or add new subjects in the future.

The state was used to track the user's current quiz, the selected answers, and the progress through the quiz.

A core part of the app is the logic for handling user selections, validating responses, and providing immediate feedback on whether an answer was correct or incorrect.

Error handling mechanisms were put in place to ensure that users cannot move forward in the quiz without selecting an answer.

Using modern CSS techniques, the app was made fully responsive, with flexible layouts that adapt based on screen size.

Extensive testing was performed to ensure that the UI remained functional and visually appealing across a range of devices.

Accessibility features, such as ARIA roles, were incorporated to ensure that the app meets web accessibility standards.

Focus states and intuitive navigation were built into the app to enhance usability for users with different needs.

Ensuring that the final UI closely resembled the design provided in the challenge was a significant focus. I carefully inspected the design details and made adjustments to the CSS to ensure pixel-perfect implementation.

Handling the quiz logic and feedback while maintaining a smooth user experience required careful state management. React’s state system helped manage the quiz flow effectively, ensuring that the app responded to user inputs in real-time.

Testing the app across multiple devices was critical to ensuring that it performed well in different environments. The challenge was addressed by using a mobile-first design approach and utilizing flexible CSS grid and flexbox layouts.