Quiz App – Mini-Projects

This tutorial will guide you through building a basic quiz app using JavaScript, suitable for intermediate learners. We’ll focus on creating a simple app that allows users to take quizzes and receive feedback. This project will cover fundamental JavaScript concepts like variables, functions, event handling, and basic DOM manipulation. It’s a great starting point for expanding your skills and understanding of web development.

Introduction

A quiz app is a fun and engaging application that tests users’ knowledge on various topics. This tutorial will walk you through building a simple quiz app, incorporating features like question presentation, answer submission, and feedback. It’s a foundational project that will help solidify your understanding of JavaScript and web development principles.

A Quiz App allows users to answer questions and check their score.

Quiz apps are useful because they:

Test user knowledge
Improve interaction
Help learn JavaScript concepts

In this project, users can:

Answer multiple-choice questions
Get instant feedback
See final score

🧠 Concepts You Will Learn

Arrays and objects
DOM manipulation
Event handling
Conditional logic
Dynamic UI updates

📌 Features

Multiple-choice questions
Next question functionality
Score tracking
Final result display

🏗️ Project Setup

You only need:

A browser
A code editor

💻 Code Implementation

📁 index.html

<!DOCTYPE html>
<html>
<head>
  <title>Quiz App</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .quiz-container {
      background: white;
      width: 100%;
      max-width: 500px;
      padding: 40px;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    h1 {
      color: #667eea;
      margin-bottom: 10px;
      font-size: 2.5em;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    #question {
      color: #333;
      margin: 25px 0;
      font-size: 1.4em;
      line-height: 1.5;
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #answers {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 25px 0;
    }

    #answers button {
      padding: 15px 20px;
      border: 2px solid #e0e0e0;
      background: white;
      color: #333;
      border-radius: 10px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s ease;
      text-align: left;
      position: relative;
      overflow: hidden;
    }

    #answers button:hover:not(:disabled) {
      border-color: #667eea;
      background: #f8f9ff;
      transform: translateX(5px);
      box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
    }

    #answers button:disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }

    #answers button.correct {
      background: #d4edda;
      border-color: #27ae60;
      color: #155724;
    }

    #answers button.wrong {
      background: #f8d7da;
      border-color: #e74c3c;
      color: #721c24;
    }

    #nextBtn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 15px 30px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 18px;
      font-weight: 600;
      transition: all 0.3s ease;
      width: 100%;
      margin-top: 20px;
      display: none;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    #nextBtn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    }

    #nextBtn:active {
      transform: translateY(0);
    }

    #score {
      display: none;
      margin-top: 25px;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 10px;
      font-size: 1.3em;
      font-weight: 600;
      animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .progress-bar {
      width: 100%;
      height: 8px;
      background: #e0e0e0;
      border-radius: 10px;
      margin: 20px 0;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
      border-radius: 10px;
      transition: width 0.5s ease;
    }
  </style>
</head>
<body>

  <div class="quiz-container">

    <h1>🧠 Quiz App</h1>

    <div class="progress-bar">
      <div class="progress-fill" id="progressBar"></div>
    </div>

    <h2 id="question">Question</h2>

    <div id="answers"></div>

    <button id="nextBtn">Next Question →</button>

    <h3 id="score"></h3>

  </div>

  <script src="script.js"></script>

</body>
</html>

📁 index.html

const quizData = [
  {
    question: "What is the capital of France?",
    options: ["Berlin", "Paris", "Rome", "Madrid"],
    correct: "Paris"
  },
  {
    question: "Which planet is largest?",
    options: ["Mars", "Jupiter", "Venus", "Earth"],
    correct: "Jupiter"
  },
  {
    question: "Which language runs in browser?",
    options: ["Python", "C++", "JavaScript", "Java"],
    correct: "JavaScript"
  },
  {
    question: "What is 12 × 8?",
    options: ["80", "96", "108", "72"],
    correct: "96"
  },
  {
    question: "Who wrote 'Romeo and Juliet'?",
    options: ["William Shakespeare", "Charles Dickens", "J.K. Rowling", "Mark Twain"],
    correct: "William Shakespeare"
  },
  {
    question: "Which element has the chemical symbol 'O'?",
    options: ["Gold", "Oxygen", "Osmium", "Iron"],
    correct: "Oxygen"
  },
  {
    question: "What year did the first man land on the moon?",
    options: ["1969", "1959", "1975", "1982"],
    correct: "1969"
  }
];

let currentQuestion = 0;
let score = 0;
let answered = false;

const questionEl = document.getElementById("question");
const answersEl = document.getElementById("answers");
const nextBtn = document.getElementById("nextBtn");
const scoreEl = document.getElementById("score");
const progressBar = document.getElementById("progressBar");

// Load question
function loadQuestion() {
  answered = false;
  const currentQuiz = quizData[currentQuestion];

  questionEl.textContent = currentQuiz.question;
  answersEl.innerHTML = "";
  nextBtn.style.display = "none";
  scoreEl.style.display = "none";

  // Update progress bar
  const progress = ((currentQuestion) / quizData.length) * 100;
  progressBar.style.width = progress + "%";

  currentQuiz.options.forEach(option => {
    const button = document.createElement("button");
    button.textContent = option;

    button.addEventListener("click", function() {
      if (!answered) {
        checkAnswer(option, button);
      }
    });

    answersEl.appendChild(button);
  });
}

// Check answer
function checkAnswer(selected, button) {
  answered = true;
  const correctAnswer = quizData[currentQuestion].correct;
  const buttons = answersEl.querySelectorAll("button");

  // Disable all buttons and show correct answer
  buttons.forEach(btn => {
    btn.disabled = true;
    if (btn.textContent === correctAnswer) {
      btn.classList.add("correct");
    }
  });

  // Show feedback
  if (selected === correctAnswer) {
    score++;
    button.classList.add("correct");
  } else {
    button.classList.add("wrong");
  }

  nextBtn.style.display = "block";
}

// Next question
nextBtn.addEventListener("click", function() {

  currentQuestion++;

  if (currentQuestion < quizData.length) {

    loadQuestion();

  } else {

    showScore();

  }

});

// Show score
function showScore() {
  // Complete the progress bar
  progressBar.style.width = "100%";

  questionEl.textContent = "🎉 Quiz Completed!";
  answersEl.innerHTML = "";

  nextBtn.style.display = "none";

  const percentage = (score / quizData.length) * 100;
  let emoji = "🏆";
  if (percentage < 50) emoji = "💪";
  else if (percentage < 100) emoji = "🌟";

  scoreEl.innerHTML = `
    ${emoji} Your Score: ${score} / ${quizData.length}<br>
    <span style="font-size: 0.8em; opacity: 0.9;">${percentage.toFixed(0)}% Correct</span>
  `;
  scoreEl.style.display = "block";
}

// Initial load
loadQuestion();

nextBtn.style.display = "none";

Quiz App Tutorial

▶️ How to Run

Create a folder
Add:
- index.html
- script.js
Open index.html in browser

⚙️ How It Works

Questions stored in an array of objects
loadQuestion() updates the UI
Answer buttons are created dynamically
checkAnswer() validates the selected answer
Score is tracked using a variable

Summary

This tutorial has provided a basic introduction to building a quiz app using JavaScript. By understanding fundamental concepts like variables, functions, and event handling, you’ve laid a solid foundation for further exploration and development of more complex web applications. Remember to practice and experiment with different features to truly master the skills you’ve learned.

Quiz App

Quiz App – Mini-Projects

Introduction

🧠 Concepts You Will Learn

📌 Features

🏗️ Project Setup

💻 Code Implementation

📁 index.html

📁 index.html

Quiz App Tutorial

▶️ How to Run

⚙️ How It Works

Summary

Sign in to track progress

Choose your next step