Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / blogger / bootstrap / javascript / kuis dengan html

Buat Kuis Interaktif dengan HTML, Javascript, dan Bootstrap di Blogger: Panduan Lengkap

Posting Komentar

Membuat kuis interaktif dan menarik untuk blog Anda di Blogger kini semakin mudah dengan bantuan HTML, Javascript, dan Bootstrap. Script yang akan dijelaskan dalam artikel ini memungkinkan Anda untuk membuat kuis pilihan ganda dengan berbagai fitur menarik, seperti:

  • Pembahasan soal: Jelaskan jawaban yang benar dengan detail agar peserta kuis memahami konsepnya.
  • Kunci jawaban: Tampilkan kunci jawaban di akhir kuis untuk membantu peserta mengevaluasi diri.
  • Timer: Batasi waktu pengerjaan kuis untuk meningkatkan fokus dan konsentrasi peserta.
  • Input data peserta: Dapatkan informasi seperti nama, asal sekolah, dan kelas peserta untuk analisis data.
  • Tampilan yang menarik: Desain kuis dengan Bootstrap untuk tampilan yang responsif dan menarik di berbagai perangkat.
  • Tombol navigasi: Lengkapi kuis dengan tombol Mulai, Submit, dan Mulai Kembali untuk kemudahan penggunaan.
  • Penilaian otomatis: Hitung nilai peserta secara otomatis berdasarkan jawaban yang dipilih.
  • Script yang mudah diedit: Modifikasi script sesuai kebutuhan Anda dengan pengetahuan dasar HTML, Javascript, dan Bootstrap.



Script HTML untuk Kuis Interaktif

Berikut ini adalah script HTML dasar untuk membuat kuis interaktif dengan fitur-fitur yang telah disebutkan:

<html lang="en"> <head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <title>Kuis Matematika Kelas 3 SD - Penjumlahan</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></link> <style> body { font-family: Arial, sans-serif; background-color: #f8f9fa; } .quiz-container { max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .question { margin-bottom: 20px; } .options label { display: block; margin-bottom: 10px; } </style> </head> <body> <div class="quiz-container"> <h2 class="text-center mb-4">Kuis Matematika Kelas 3 SD - Penjumlahan</h2> <div id="studentInfo"> <div class="form-group"> <label for="nama">Nama Siswa:</label> <input class="form-control" id="nama" placeholder="Masukkan nama siswa" type="text" /> </div> <div class="form-group"> <label for="sekolah">Asal Sekolah:</label> <input class="form-control" id="sekolah" placeholder="Masukkan asal sekolah" type="text" /> </div> <div class="form-group"> <label for="kelas">Kelas:</label> <input class="form-control" id="kelas" placeholder="Masukkan kelas" type="text" /> </div> </div> <button class="btn btn-primary btn-block mb-4" id="startBtn">Mulai Kuis</button> <form id="quizForm" style="display: none;"> <div class="question" id="question1"> <p>Berapakah hasil dari 5 + 3?</p> <div class="options"> <label><input name="q1" type="radio" value="a" /> 7</label> <label><input name="q1" type="radio" value="b" /> 8</label> <label><input name="q1" type="radio" value="c" /> 6</label> <label><input name="q1" type="radio" value="d" /> 9</label> </div> <p class="answer" style="display: none;">Jawaban yang benar: 8. Penjelasan: 5 + 3 = 8.</p> </div> <div class="question" id="question2"> <p>Berapakah hasil dari 7 + 4?</p> <div class="options"> <label><input name="q2" type="radio" value="a" /> 10</label> <label><input name="q2" type="radio" value="b" /> 11</label> <label><input name="q2" type="radio" value="c" /> 12</label> <label><input name="q2" type="radio" value="d" /> 13</label> </div> <p class="answer" style="display: none;">Jawaban yang benar: 11. Penjelasan: 7 + 4 = 11.</p> </div> <div class="question" id="question3"> <p>Berapakah hasil dari 9 + 2?</p> <div class="options"> <label><input name="q3" type="radio" value="a" /> 10</label> <label><input name="q3" type="radio" value="b" /> 11</label> <label><input name="q3" type="radio" value="c" /> 12</label> <label><input name="q3" type="radio" value="d" /> 13</label> </div> <p class="answer" style="display: none;">Jawaban yang benar: 11. Penjelasan: 9 + 2 = 11.</p> </div> </form> <button class="btn btn-success btn-block mb-4" id="submitBtn" style="display: none;">Submit</button> <button class="btn btn-info btn-block mb-4" id="restartBtn" style="display: none;">Mulai Kembali</button> <div id="result"></div> <div class="text-center mb-4" id="timer">Waktu: <span id="time">10:00</span></div> </div> <script> var startTime, timer, timeLimit = 600; // 10 menit var quizForm = document.getElementById('quizForm'); var submitBtn = document.getElementById('submitBtn'); var restartBtn = document.getElementById('restartBtn'); var namaInput = document.getElementById('nama'); var sekolahInput = document.getElementById('sekolah'); var kelasInput = document.getElementById('kelas'); var studentInfo = document.getElementById('studentInfo'); document.getElementById('startBtn').addEventListener('click', function() { startQuiz(); startTimer(); }); function startQuiz() { shuffleQuestions(); // Acak urutan soal startTime = new Date().getTime(); quizForm.style.display = 'block'; studentInfo.style.display = 'none'; document.getElementById('startBtn').style.display = 'none'; submitBtn.style.display = 'block'; restartBtn.style.display = 'none'; } function startTimer() { timer = setInterval(function() { var now = new Date().getTime(); var elapsed = now - startTime; var minutes = Math.floor((timeLimit - elapsed / 1000) / 60); var seconds = Math.floor((timeLimit - elapsed / 1000) % 60); document.getElementById('time').innerHTML = (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); if (elapsed >= timeLimit * 1000) { clearInterval(timer); submitQuiz(); } }, 1000); } submitBtn.addEventListener('click', function() { submitQuiz(); }); function submitQuiz() { clearInterval(timer); submitBtn.style.display = 'none'; restartBtn.style.display = 'block'; var answers = { q1: "b", // Jawaban untuk pertanyaan 1 q2: "b", // Jawaban untuk pertanyaan 2 q3: "c" // Jawaban untuk pertanyaan 3 }; var score = 0; var totalQuestions = Object.keys(answers).length; for (var i = 1; i <= totalQuestions; i++) { var selectedOption = quizForm.querySelector('input[name="q' + i + '"]:checked'); if (selectedOption) { if (selectedOption.value === answers['q' + i]) { score++; } } } var nilai = (score / totalQuestions) * 100; var resultContainer = document.getElementById('result'); resultContainer.innerHTML = '<div class="alert alert-primary" role="alert">Nilai ' + namaInput.value + ', Asal Sekolah ' + sekolahInput.value + ', Kelas ' + kelasInput.value + ' adalah: ' + nilai.toFixed(2) + '</div>'; for (var i = 1; i <= totalQuestions; i++) { var answerExplanation = quizForm.querySelector('#question' + i + ' .answer'); if (answerExplanation) { answerExplanation.style.display = 'block'; resultContainer.appendChild(answerExplanation.cloneNode(true)); } } } restartBtn.addEventListener('click', function() { studentInfo.style.display = 'block'; quizForm.reset(); startQuiz(); startTimer(); document.getElementById('result').innerHTML = ''; }); function shuffleQuestions() { var questions = document.querySelectorAll('.question'); var parent = questions[0].parentNode; for (var i = parent.children.length; i >= 0; i--) { parent.appendChild(parent.children[Math.random() * i | 0]); } } </script> </body> </html> Dan ini contoh tampilannya.

Posting Komentar untuk "Buat Kuis Interaktif dengan HTML, Javascript, dan Bootstrap di Blogger: Panduan Lengkap"

Posting Komentar