Membuat Aplikasi Kuis Interaktif dengan Skor dan Timer

Dipublikasikan: Juli 2026

Aplikasi kuis adalah web app seru yang banyak dicari untuk pembelajaran dan hiburan. Tutorial ini akan memandu Anda membuat kuis interaktif dengan timer, skor, dan feedback jawaban.

Fitur Kuis

10 pertanyaan dengan 4 pilihan jawaban
Timer 15 detik per pertanyaan
Skor otomatis di akhir
Feedback benar/salah langsung

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aplikasi Kuis</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family:'Segoe UI',Arial,sans-serif;
      background:linear-gradient(135deg,#f093fb,#f5576c);
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:20px;
    }
    .quiz-container {
      background:#fff; border-radius:20px;
      padding:35px; box-shadow:0 20px 60px rgba(0,0,0,0.2);
      width:100%; max-width:600px;
    }
    .header { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }
    .header .question-num { color:#636e72; font-size:15px; }
    .header .timer {
      background:#f5576c; color:#fff; padding:8px 16px;
      border-radius:8px; font-weight:700; font-size:16px;
    }
    .question { font-size:22px; color:#2d3436; margin-bottom:25px; line-height:1.5; }
    .options { display:flex; flex-direction:column; gap:12px; margin-bottom:25px; }
    .option {
      padding:16px 20px; border:2px solid #dfe6e9; border-radius:12px;
      cursor:pointer; font-size:16px; transition:all 0.3s;
    }
    .option:hover { border-color:#6c5ce7; background:#f8f7ff; }
    .option.selected { border-color:#6c5ce7; background:#f0edff; }
    .option.correct { border-color:#00b894; background:#e6fff8; }
    .option.wrong { border-color:#d63031; background:#ffe6e6; }
    .option.disabled { pointer-events:none; opacity:0.7; }
    .feedback { padding:15px; border-radius:10px; margin-bottom:20px; display:none; font-size:15px; }
    .feedback.correct { background:#d4edda; color:#155724; display:block; }
    .feedback.wrong { background:#f8d7da; color:#721c24; display:block; }
    .next-btn {
      width:100%; padding:16px; background:#6c5ce7; color:#fff;
      border:none; border-radius:12px; cursor:pointer; font-size:17px; display:none;
    }
    .next-btn:hover { background:#5b4bd6; }
    .result {
      text-align:center; display:none;
    }
    .result h2 { font-size:28px; color:#2d3436; margin-bottom:10px; }
    .result .score { font-size:48px; font-weight:700; color:#6c5ce7; margin:15px 0; }
    .result .message { font-size:18px; color:#636e72; margin-bottom:25px; }
    .result button {
      padding:14px 35px; background:#6c5ce7; color:#fff;
      border:none; border-radius:12px; cursor:pointer; font-size:16px;
    }
    .start-screen { text-align:center; }
    .start-screen h2 { font-size:28px; margin-bottom:15px; }
    .start-screen p { color:#636e72; margin-bottom:25px; }
    .start-btn {
      padding:16px 40px; background:#6c5ce7; color:#fff;
      border:none; border-radius:12px; cursor:pointer; font-size:18px;
    }
  </style>
</head>
<body>
  <div class="quiz-container">
    <div id="startScreen" class="start-screen">
      <h2>ðŸ§  Aplikasi Kuis</h2>
      <p>Jawab 10 pertanyaan dalam waktu terbatas. Dapatkan skor tertinggi!</p>
      <button class="start-btn" onclick="startQuiz()">Mulai Kuis</button>
    </div>
    <div id="quizScreen" style="display:none">
      <div class="header">
        <div class="question-num" id="questionNum">Pertanyaan 1/10</div>
        <div class="timer" id="timer">15</div>
      </div>
      <div class="question" id="question"></div>
      <div class="options" id="options"></div>
      <div class="feedback" id="feedback"></div>
      <button class="next-btn" id="nextBtn" onclick="nextQuestion()">Pertanyaan Selanjutnya</button>
    </div>
    <div id="resultScreen" class="result" style="display:none">
      <h2>ðŸŽ‰ Kuis Selesai!</h2>
      <div class="score" id="finalScore">0/10</div>
      <div class="message" id="finalMessage"></div>
      <button onclick="resetQuiz()">Main Lagi</button>
    </div>
  </div>
  <script>
    const questions = [
      { q: 'Apa singkatan dari HTML?', o: ['HyperText Markup Language','High Tech Modern Language','Home Tool Markup Language','Hyper Transfer Markup Language'], a: 0 },
      { q: 'CSS digunakan untuk...', o: ['Membuat struktur halaman','Mendesain tampilan halaman','Menambah interaksi','Menyimpan data'], a: 1 },
      { q: 'JavaScript adalah bahasa pemrograman...', o: ['Server-side','Client-side','Database','Markup'], a: 1 },
      { q: 'Apa fungsi tanda "=" dalam JavaScript?', o: ['Perbandingan','Penugasan','Pertambahan','Pengurangan'], a: 1 },
      { q: 'HTML tag untuk hyperlink adalah...', o: ['<link>','<a>','<href>','<url>'], a: 1 },
      { q: 'Properti CSS untuk mengubah warna teks?', o: ['background-color','text-color','color','font-color'], a: 2 },
      { q: 'Apa itu array dalam JavaScript?', o: ['Tipe data angka','Kumpulan data','Fungsi','Objek'], a: 1 },
      { q: 'Fungsi untuk mencetak ke console?', o: ['print()','log()','console.log()','write()'], a: 2 },
      { q: 'Apa kepanjangan dari DOM?', o: ['Document Object Model','Data Object Model','Document Oriented Model','Digital Output Mode'], a: 0 },
      { q: 'Tag HTML untuk membuat paragraf?', o: ['<paragraph>','<pg>','<p>','<para>'], a: 2 }
    ];
    let current = 0, score = 0, timer = 15, timerInterval = null, answered = false;
    function startQuiz() {
      document.getElementById('startScreen').style.display = 'none';
      document.getElementById('quizScreen').style.display = 'block';
      current = 0; score = 0; showQuestion();
    }
    function showQuestion() {
      answered = false;
      document.getElementById('nextBtn').style.display = 'none';
      document.getElementById('feedback').className = 'feedback';
      const q = questions[current];
      document.getElementById('questionNum').textContent = `Pertanyaan ${current+1}/${questions.length}`;
      document.getElementById('question').textContent = q.q;
      const opts = document.getElementById('options');
      opts.innerHTML = q.o.map((opt,i) => `<div class="option" onclick="select(${i})">${opt}</div>`).join('');
      timer = 15; document.getElementById('timer').textContent = timer;
      clearInterval(timerInterval);
      timerInterval = setInterval(() => {
        timer--;
        document.getElementById('timer').textContent = timer;
        if (timer <= 0) { clearInterval(timerInterval); select(-1); }
      }, 1000);
    }
    function select(chosen) {
      if (answered) return;
      answered = true; clearInterval(timerInterval);
      const q = questions[current]; const opts = document.querySelectorAll('.option');
      opts.forEach((el,i) => { el.classList.add('disabled');
        if (i === q.a) el.classList.add('correct');
        if (i === chosen && chosen !== q.a) el.classList.add('wrong');
        if (i === chosen) el.classList.add('selected');
      });
      if (chosen === q.a) { score++; document.getElementById('feedback').className = 'feedback correct';
        document.getElementById('feedback').textContent = 'âœ… Benar!'; }
      else { document.getElementById('feedback').className = 'feedback wrong';
        document.getElementById('feedback').textContent = 'âŒ Salah! Jawaban: ' + q.o[q.a]; }
      document.getElementById('nextBtn').style.display = 'block';
    }
    function nextQuestion() {
      current++;
      if (current >= questions.length) showResult();
      else showQuestion();
    }
    function showResult() {
      document.getElementById('quizScreen').style.display = 'none';
      document.getElementById('resultScreen').style.display = 'block';
      document.getElementById('finalScore').textContent = `${score}/${questions.length}`;
      const pct = score / questions.length * 100;
      let msg = '';
      if (pct >= 90) msg = 'Luar biasa! Anda master coding! ðŸ†';
      else if (pct >= 70) msg = 'Bagus! Terus belajar! ðŸ‘';
      else if (pct >= 50) msg = 'Cukup, masih perlu belajar lagi ðŸ’ª';
      else msg = 'Ayo belajar lagi dari awal! ðŸ“š';
      document.getElementById('finalMessage').textContent = msg;
    }
    function resetQuiz() {
      document.getElementById('resultScreen').style.display = 'none';
      document.getElementById('startScreen').style.display = 'block';
    }
  </script>
</body>
</html>