Quiz Me

Quiz Me is a lightweight quiz app built with HTML, CSS, and JavaScript.

Comment

Inspiration

I’ve always loved interactive learning tools and quizzes—they make practicing new concepts fun and engaging. I wanted to build a simple web-based quiz game that tests vocabulary, with instant feedback for correct and incorrect answers. The goal was to create something lightweight, visually clean, and responsive.

What I Learned

While building this project, I deepened my understanding of:

  • DOM manipulation: dynamically generating question buttons and updating the interface.
  • Event handling: using addEventListener to capture user actions.
  • State management: tracking current question, score, and UI states.
  • CSS transitions and responsive design: making the quiz visually appealing across devices.

I also refreshed my knowledge of JavaScript fundamentals like loops, conditionals, and arrays.

How I Built It

  1. HTML structure:
    • Created three screens: Start, Quiz, and Result.
    • Each screen has its own container <div> with a unique ID.
  2. CSS styling:
    • Designed a clean UI with responsive layouts.
    • Added visual feedback for correct/incorrect answers.
    • Styled buttons and progress bar for smooth animations.
  3. JavaScript functionality:
    • Defined an array of quiz questions with possible answers and a correct flag.
    • Dynamically populated the quiz screen based on currentQuestionIndex.
    • Handled user selection, score tracking, and showing results.
    • Added a restart button that resets state without reloading the page.

Challenges

  • Start screen not showing: I initially struggled because the JavaScript ran before the DOM fully loaded. Using window.onload or placing the <script> at the bottom solved it.
  • Button feedback: Ensuring only the clicked answer is highlighted correctly took some careful state management with answersDisabled.
  • GitHub Pages deployment: I learned that the index.html file must be in the root of the branch for the page to load correctly.

Accomplishments I'm Proud Of

  • Successfully built a fully interactive quiz game using only HTML, CSS, and JavaScript.
  • Implemented dynamic question rendering with buttons that respond to correct and incorrect answers.
  • Designed a clean, responsive UI with progress bars and visual feedback without using any frameworks.
  • Learned how to manage application state in a simple JavaScript project (current question, score, disabling answers).
  • Overcame deployment challenges and deployed the project on GitHub Pages, making it accessible online.
  • Improved my debugging and problem-solving skills while fixing UI and logic issues.
  • Created a project that is easy to extend for future features like timers, categories, and leaderboards.

Next Steps

  • Add more question categories and randomization.
  • Implement a timer for each question.
  • Add a persistent leaderboard using local storage or a backend.
  • Improve mobile design and animations.

Built With

Share this project:

Updates