Project Purpose
Quiz App was created as a milestone project to demonstrate skill in HTML, CSS and JavaScript. The goal was to build an interactive , accessible, and user-friendly quiz application that works across all devices while following UX best practices and accessibility guidelines.
This project showcases the ability to create dynamic content , handle user interactions, and present information in a clear , structured way.
UX Design Process
User-Centered Design
User Needs: Quick, distraction-free quiz experience without signup requirements.
How I addressed this: Clean interface, no login required, instant feedback on answers.
Accessibility First
Guidelines followed: WCAG 2.1 AA standards
Implementation: Semantic HTML, keyboard navigation, high contrast colors (4.5:1 minimum), ARIA labels, focus states, screen reader compatibility.
Visual Design Principles
Consistency: Same layout styling across all pages.
Hierarchy: Clear visual hierarchy with headings, spacing, and color.
Feedback: Hover effects, button states, score display at end
Color Scheme: Purple (#8e44ad) for primary actions, light gray (#e1e8df) for background - chosen for contrast and calm learning environment
Information Architecture
Navigation: Three clear sections - Home (Introduction), Take Quiz (main activity), About (documentation)
User Flow:Home ➡️ Learn about app ➡️ Take Quiz ➡️ See Results ➡️ Try Again
User Stories
New Users
- "As a new user, I want to understand what the app does immediately" - Addressed by home page hero section
- "As a user, I want to start the quiz quickly without signing up" - One-click access from home page
- "As a user , I want clear instructions on how to use the quiz" - Simple interface with clear buttons and submit button
Returning Users
- "As a returning user, I want to see different questions each time" - Answer randomization implemented
- "As a user, I want to track my progress" - Score displayed at end, can try again to improve
- "As a mobile user, I want the app to work on my phone" - Fully responsive design with mobile navigation
Technologies Used
- HTML5 - Semantic structure, meta tags for SEO, favicon integration
- CSS3 - Flexbox for layouts, media queries for responsiveness, CSS variables, transitions and animations
- JavaScript - DOM manipulation, event handling, quiz logic, answer randomization
- Jest - Unit testing for quiz functionality and data structure
- Git & GitHub - Version control with meaningful commits
- GitHub Pages - Deployment and hosting
Testing Approach
Automated Testing (Jest)
- Quiz data structure Validation
- Score Calculation logic
- Answer Selection detection
- DOM updates verification
Manual Testing
- Cross-browser testing (Chrome, Firefox, Safari, Edge)
- Mobile device testing (iphone, Android, ipad)
- keyboard navigation verification
- Screen reader compatibility
- Color contrast checking with WAVE tool
Accessibility Testing Results
- Lighthouse Accessibility Score: 100
- WAVE tool No errors
- Color contrast ratio: 7.1:1 (exceeds 4.5:1 requirement)
- Full keyboard navigable with visible focus states
Future Enhancements
Planned improvements based on user feedback:
- Question Categories - HTML, CSS, JavaScript, Python sections
- Local Storage - Save high scores and track progress over time
- Timed Mode - Add timer for extra challenge
- Progress Indicator - Show question X of Y during quiz
- External Data Source - Load Questions from JSON for easy expansion
- Share Results - Option to share scores on social media
Get Involved
This project is open source and contributions are welcome!
Visit the GitHub repository to:
- Report bugs or issues
- Suggest new features
- Contribute code improvements
- Add more quiz questions
Project by: Raja - Code Institute Milestone Project 2