BUILD WITH ME · DAY 4 / 7

Quiz App

Aaj ek Quiz App banaoge — sawaal, 3 options, sahi par green ✅, galat par red ❌, aur end me score. Sawaal code me nahi, ek array of objects me honge — naya sawaal jodna ho to bas ek object add karo.

⏱ 25 min🎯 JavaScript🛠 Arrays, objects, score logic

Data ko array of objects me rakhna: { q, options, answer }
Ek function (showQuestion) jo data se poora screen banaye
createElement + onclick se buttons banana
disabled, classList.add — answer ke baad options lock
let current, let score — app ki "state" yaad rakhna

Seedha code karo ↓Step by step

Aaj yeh banega 👇

Step by step

Har step me "Editor me daalo" dabao — ya best: khud type karo, haath se likha code yaad rehta hai. ✍️

1Quiz ka HTMLindex.html

Sab dabbe khaali hain — question, options, progress sab JavaScript bharega.
Har dabbe ka id hai taaki JS unhe pakad sake.

  <div class="quiz">
    <p class="progress" id="progress"></p>
    <h2 id="question"></h2>
    <div class="options" id="options"></div>
    <button class="next" id="next">Next →</button>
  </div>

2White cardstyle.css

Wahi Day 1 wala center card — ab tak yaad ho gaya hoga 😄

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0f172a;
  font-family: sans-serif;
}
.quiz {
  width: 340px;
  padding: 24px;
  background: #fff;
  border-radius: 20px;
}

3Options + green / redstyle.css

.options { display: grid; gap } — options ek ke neeche ek, barabar gap.
.correct = halka green, .wrong = halka red. JS yeh classes lagayega.
.options .correct likha, sirf .correct nahi — taaki yeh rule .options button se zyada strong ho (specificity).

.progress { margin: 0; color: #6366f1; font-weight: bold; }
h2 { font-size: 20px; margin: 8px 0 16px; }
.options { display: grid; gap: 10px; }
.options button {
  padding: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.options button:hover { border-color: #6366f1; }
.options .correct { background: #dcfce7; border-color: #22c55e; }
.options .wrong { background: #fee2e2; border-color: #ef4444; }

4Next buttonstyle.css

display: none — answer dene ke baad hi JS ise dikhayega.

.next {
  display: none;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: #6366f1;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

5Questions ka datascript.js

Har sawaal ek object: q (sawaal), options (array), answer (sahi option ka index).
Index 0 se shuru hota hai — answer: 1 matlab doosra option.
Apne sawaal jodne ho to bas yahan naya object daalo, baaki code kuch nahi badlega. 🔥

const questions = [
  { q: 'HTML ka full form kya hai?',
    options: ['Hyper Text Markup Language',
      'High Text Machine Language', 'Home Tool Language'],
    answer: 0 },
  { q: 'Text ka rang kaunsi CSS property badalti hai?',
    options: ['font-color', 'color', 'text-color'],
    answer: 1 },
  { q: 'Flexbox me items ke beech jagah?',
    options: ['gap', 'space', 'margin-all'],
    answer: 0 },
  { q: 'JS me value kabhi na badle, to kya use karein?',
    options: ['var', 'let', 'const'],
    answer: 2 },
  { q: 'Array ke end me item kaise add karein?',
    options: ['push()', 'pop()', 'shift()'],
    answer: 0 },
];

6showQuestion()script.js

current = abhi kaunsa sawaal, score = kitne sahi.
Progress, sawaal aur options — sab questions[current] se bharte hain.
Har option ke liye button banaya; click par checkAnswer(btn, i) chalega.

const qEl = document.querySelector('#question');
const optEl = document.querySelector('#options');
const progEl = document.querySelector('#progress');
const nextBtn = document.querySelector('#next');
const total = questions.length;
let current = 0;
let score = 0;

function showQuestion() {
  const item = questions[current];
  progEl.textContent = `Question ${current + 1} / ${total}`;
  qEl.textContent = item.q;
  optEl.innerHTML = '';
  nextBtn.style.display = 'none';
  item.options.forEach((text, i) => {
    const btn = document.createElement('button');
    btn.textContent = text;
    btn.onclick = () => checkAnswer(btn, i);
    optEl.append(btn);
  });
}

7checkAnswer()script.js

Sabhi options disabled — ek hi baar answer de sakte ho.
Sahi option hamesha green. Agar user ka i sahi hai → score++, warna uska button red.
Phir Next button dikhao.

function checkAnswer(btn, i) {
  const answer = questions[current].answer;
  const all = optEl.querySelectorAll('button');
  all.forEach(b => b.disabled = true);
  all[answer].classList.add('correct');
  if (i === answer) score++;
  else btn.classList.add('wrong');
  nextBtn.style.display = 'block';
}

8Result + Nextscript.js

Next dabane par current++. Sawaal bache hain → agla dikhao, khatam → score screen.
Score screen par Next → Restart: current aur score wapas 0.
Aakhri line showQuestion() — page khulte hi pehla sawaal.

function showResult() {
  progEl.textContent = 'Quiz khatam! 🎉';
  qEl.textContent = `Score: ${score} / ${total}`;
  optEl.innerHTML = '';
  nextBtn.textContent = 'Restart ↺';
}

nextBtn.addEventListener('click', () => {
  current++;
  if (current < total) {
    showQuestion();
  } else if (current === total) {
    showResult();
  } else {
    current = 0;
    score = 0;
    nextBtn.textContent = 'Next →';
    showQuestion();
  }
});

showQuestion();