EquiQuiz

Test your civic and economic knowledge with interactive visual results.

Comment

Hackathon Project Submission: EquiQuiz

Inspiration

I was inspired by the growing need for civic and economic education in an increasingly complex world. With misinformation spreading rapidly and many people feeling disconnected from governmental processes, I wanted to create an engaging tool that makes learning about these critical topics accessible, interactive, and even fun. I believe that an informed citizenry is essential for a healthy democracy, and EquiQuiz is my contribution toward that goal.

What it does

EquiQuiz is an interactive web application that tests users' knowledge of fundamental civic and economic concepts through a series of multiple-choice questions. After completing the quiz, users receive:

  • A final score with personalized feedback
  • Visual data representations using Chart.js (pie chart showing correct/incorrect distribution and a bar chart showing performance per question)
  • Explanations for each answer to facilitate learning
  • The ability to restart and try again without page refresh

How we built it

  • Frontend: Pure HTML5, CSS3 with Flexbox/Grid for responsive design, and vanilla JavaScript
  • Data Visualization: Chart.js integrated via CDN for beautiful result charts
  • Architecture: Modular JavaScript with separate functions for quiz logic, UI updates, and chart rendering
  • Design: Custom CSS with a focus on accessibility, clean typography, and intuitive user flow
  • Version Control: Git for source code management

Challenges we ran into

  • Integrating Chart.js with our existing quiz logic without framework dependencies
  • Managing state transitions between quiz screens smoothly
  • Ensuring responsive design worked across all device sizes
  • Preventing chart overlapping issues with proper CSS containment
  • Implementing a restart function that properly reset all quiz states and destroyed previous chart instances
  • Debugging asynchronous rendering issues with the chart components

Accomplishments that we're proud of

  • Creating a fully functional educational tool without any JavaScript frameworks
  • Successfully integrating data visualization that provides genuine educational value
  • Building an intuitive UI that works seamlessly across desktop and mobile devices
  • Implementing immediate feedback with explanations that actually teach concepts
  • Developing a clean code architecture that's easy to maintain and extend
  • Achieving a perfect Lighthouse accessibility score for inclusive design

What we learned

  • How to effectively integrate third-party libraries (Chart.js) with vanilla JavaScript
  • Advanced CSS techniques for responsive data visualization containers
  • State management patterns for multi-screen applications
  • The importance of proper chart cleanup to prevent memory leaks
  • How to design educational content that balances challenge with accessibility
  • Techniques for making data visualization accessible to all users

What's next for EquiQuiz

  • Question Bank Expansion: Add more questions across difficulty levels and topics
  • User Accounts: Implement persistence for tracking progress over time
  • Category Selection: Allow users to choose specific civic or economic topics
  • Multi-language Support: Translate content to make it accessible globally
  • Admin Dashboard: Create tools for educators to customize quizzes
  • Mobile App: Develop native iOS and Android versions
  • Gamification: Add badges, leaderboards, and achievement systems
  • API Integration: Connect with civic data sources for current events questions
  • Accessibility Enhancements: Screen reader optimization and voice command support
  • Classroom Mode: Create versions tailored for educational institutions

EquiQuiz represents our commitment to making civic education engaging and accessible for all. We believe that understanding how our government and economy work shouldn't feel like homework—it should feel like empowerment.

Share this project:

Updates