Harrison Holt

Interactive Quiz App

Description:
The Interactive Quiz App is a dynamic web application designed to offer users a fun and engaging way to test their knowledge across various topics. Developed using React.js for efficient state management and Bootstrap for responsive design, this app ensures an interactive and accessible experience on any device.

My Design Process

The goal was to create a user-friendly interface that is both engaging and intuitive, minimizing distractions to focus users on quiz content. The layout is designed to guide users through quizzes smoothly without any unnecessary complexity.

Color Palette

The selected color palette is designed to enhance focus and user engagement, using vibrant colors to differentiate between quiz elements and feedback:

#4a76a8 (Steel Blue): Used for primary interface elements and headers.

#f8f9fa (Cultured): Applied as the background color to provide a clean and subtle canvas.

#007bff (Vivid Blue): Utilized for interactive elements such as buttons and links to draw attention.

#28a745 (Forest Green): Used for correct answers and confirmation messages to signify success.

#dc3545 (Ruby Red): Employed for warnings and incorrect answers to alert users.

Wireframe

Design Mockup


Technology Stack

For the development of the Interactive Quiz App, I used the following technologies:

My Coding Process

This project provided an excellent opportunity to deepen my expertise in React.js, focusing on component-based architecture to manage the quiz logic and user interactions dynamically. Bootstrap was used to create a responsive layout that adapts to different screen sizes, from smartphones to large desktop displays.

Accessibility in my Coding Process

I am dedicated to ensuring my application is accessible to all users, including those with disabilities. To achieve this, I will conduct testing using the NVDA screen reader and the AXE extension, adhering to WCAG 2.0 standards throughout the development process. As my project testing progresses, I will document my accessibility testing efforts and eventually add pictures to showcase my testing methodologies and results, highlighting my commitment to creating an inclusive application.

View Project on GitHub Live Demo