Cách tạo câu hỏi và trả lời trắc nghiệm trên Blogger

Nhân dịp này mình sẽ chia sẻ mã nguồn làm các câu hỏi trắc nghiệm sử dụng CSS, HTML, Javascript. Mình đã thiết kế giao diện giống như mô hình câu hỏi và trả lời đáp án có các tính năng sau:

  • Có khung nhập họ tên và lớp giống như hướng dẫn làm bài trắc nghiệm
  • Có bộ đếm thời gian dựa trên giờ với định dạng giờ, phút, giây
  • Hiển thị câu hỏi bằng mô hình trình chiếu để tối giản hơn
  • Có menu số câu hỏi giúp bạn dễ dàng xem các câu hỏi chưa được làm
Cách tạo câu hỏi và trả lời trắc nghiệm trên Blogger
Cách tạo câu hỏi và trả lời trắc nghiệm trên Blogger

Nếu bạn quan tâm đến cách làm này, bạn có thể làm theo hướng dẫn dưới đây:

Bước 1: Hãy chuyển đến menu Chủ đề > Chỉnh sửa HTML

Bước 2: Hãy tìm thẻ: </head> và đặt đoạn mã sau lên trên nó
<style>
.center{text-align:center}
#bank-soal,.box-soal{display:none}
button#klik-mulai{width:100%;max-width:300px;padding:10px 15px;margin:20px 0;background-color:#096a71;color:#fff;font-size:16px;font-weight:600;border:0;outline:0;border-radius:3px;cursor:pointer}
#input-data .input-data{position:relative;padding:10px 15px;margin:25px auto;width:100%;max-width:640px;background-color:#fff;box-shadow:1px 1px 10px 1px rgb(0 0 0 / 15%);border-radius:3px;text-align:center}
#input-data .input-data input{position:relative;display:block;width:100%;padding:15px 10px;margin:15px 0;color:#444;border:1px solid #04eec5;border-radius:5px;outline:none}
button#mulai-mengerjakan{width:100%;padding:10px 15px;margin:10px 0;background-color:#096a71;color:#fff;font-size:14px;font-weight:600;border:0;outline:0;border-radius:5px;cursor:pointer}
.waktu-wrap{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;background:#25aa9e;color:#fff;padding:15px;margin:0 auto;width:100%;font-size:14px;transition:all 0.5s}
.waktu-wrap .data-peserta,.waktu-wrap #waktu-soal{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 auto;width:50%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;overflow:hidden;white-space:normal}
.waktu-wrap .data-peserta{text-align:left}
.waktu-wrap #waktu-soal{text-align:right}
.bank-soal-wrap{position:relative;display:block;padding:10px;border:1px solid #ddd}
.box-soal{min-height:275px;-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
.box-soal form label{position:relative;display:block;margin-bottom:3px;vertical-align:middle}
.box-soal form label:nth-child(1):before{position:absolute;content:"A";font-size:12px;top:5px;left:16.5px;z-index:3}
.box-soal form label:nth-child(2):before{position:absolute;content:"B";font-size:12px;top:5px;left:16.5px;z-index:3}
.box-soal form label:nth-child(3):before{position:absolute;content:"C";font-size:12px;top:5px;left:16.5px;z-index:3}
.box-soal form label:nth-child(4):before{position:absolute;content:"D";font-size:12px;top:5px;left:16.5px;z-index:3}
.box-soal form label:nth-child(5):before{position:absolute;content:"E";font-size:12px;top:5px;left:16.5px;z-index:3}
.box-soal form label input{position:relative;display:inline-block;background:#fff;color:#444;width:20px;height:20px;margin:5px 10px;vertical-align:middle;border:2px solid #076970;appearance:none;border-radius:50%;transition:all ease-in 0.2s}
.box-soal form label input:checked{background:#076970;color:#fff;transition:all ease-in 0.2s}
#show-hide-box-soal::-webkit-scrollbar{width:7px;background-color:#00f7ca}
#show-hide-box-soal::-webkit-scrollbar-thumb{background-color:#91979d;border-radius:5px}
#show-hide-box-soal{position:absolute;display:none;background:#fff;top:0;right:0;width:100%;max-width:300px;height:100%;max-height:300px;padding:10px;overflow:hidden;overflow-y:auto;margin:0;min-height:275px;z-index:9;-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
#show-hide-box-soal.active{display:block}
.tombol-show-hide{position:relative;display:block;background:#c1c1c1;color:#fff;padding:3px 10px;cursor:pointer}
.menu-tombol-soal .tombol-soal{position:relative;display:inline-block;background:#096a72;color:#fff;padding:10px 15px;margin:7px 2px;cursor:pointer}
.menu-tombol-soal .tombol-soal.active{background:#a7a3a3}
#menu-soal,.next-prev-soal{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;background:#25aa9e;color:#fff;padding:15px;margin:0 auto;width:100%;font-size:14px;transition:all 0.5s}
#menu-soal .next-prev-soal,#menu-soal .menu-pilihan-soal,#menu-soal .tombol-soal-selesai{-webkit-box-flex:1;-ms-flex:1 1 33%;flex:1 1 auto;width:33%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0 auto;overflow:hidden;white-space:normal}
#prev-soal,#next-soal{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 auto;width:50%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;overflow:hidden;white-space:normal;cursor:pointer}
#prev-soal svg,#next-soal svg{width:35px;height:35px;display:inline-block;vertical-align:middle}
#prev-soal svg path,#next-soal svg path{fill:#fff}
button#lihat-soal,button#soal-selesai{width:100%;max-width:300px;padding:10px 15px;margin:0 10px;background-color:#096a71;color:#fff;font-size:16px;font-weight:600;border:0;outline:0;border-radius:3px;cursor:pointer}
#lihat-hasil-nilai{position:relative;display:none;padding:10px 15px;margin:25px auto;width:100%;max-width:640px;background-color:#fff;box-shadow:1px 1px 10px 1px rgb(0 0 0 / 15%);border-radius:3px;text-align:left}
#lihat-hasil-nilai .info-keterangan-hasil{font-size:12px;font-weight:500}
@media screen and (max-width:800px){#menu-soal .next-prev-soal span{display:none}#menu-soal .next-prev-soal{margin:0 auto;text-align:center}button#lihat-soal,button#soal-selesai{width:calc(100% - 10px);max-width:300px;padding:10px;margin:0 10px;font-size:14px}}
/* Fading animation */
@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}
@keyframes fade{from{opacity:.4}to{opacity:1}}
</style>
Bước 3: Hãy tìm thẻ: </body> và đặt đoạn mã sau lên trên nó
<script>
//<![CDATA[
  var htmlDataWaktu = document.getElementById("waktu-soal");
  var htmlJumlahSoal = document.querySelector(".bank-soal-wrap");
  if (htmlDataWaktu != null){
    var waktu = htmlDataWaktu.getAttribute("data-waktu");
    var cekWaktu = new Date().getTime();
    var setWaktu = cekWaktu+(waktu*3600000);
    var waktuMulai = setWaktu - new Date().getTime();
    var jumlahSoal = htmlJumlahSoal.getAttribute("data-soal");
  }
  var jumlahBenar = 0;
  var jumlahSalah = 0;
  var tidakTerjawab = 0;
  var intervalWaktu;
  var clickMulai = document.getElementById("klik-mulai");
  if (clickMulai != null){
    clickMulai.onclick = inputData;
  }
  function inputData(){
    var htmlData = "";
    htmlData += "<div class='input-data'>";
    htmlData += "<form>";
    htmlData += "<label for='nama'><input id='nama' placeholder='Họ và tên' type='text' autocomplete='off'/></label>";
    htmlData += "<label for='kelas'><input id='kelas' placeholder='Lớp' type='text' autocomplete='off'/></label>";
    htmlData += "</form>";
    htmlData += "<button id='mulai-mengerjakan'>Làm bài</button>";
    htmlData += "</div>";
    document.getElementById("klik-mulai").style.display = "none";
    document.getElementById("input-data").innerHTML = htmlData;
    var kerjakan = document.getElementById("mulai-mengerjakan");
    if (kerjakan != null){
      kerjakan.onclick = function(){
        if (document.getElementById("nama").value == ""){
          document.getElementById("nama").focus();
          return false;
        } else if (document.getElementById("kelas").value == ""){
          document.getElementById("kelas").focus();
          return false;
        } else {
          document.getElementById("input-data").style.display = "none";
          document.getElementById("bank-soal").style.display = "block";
          document.querySelector(".nama-peserta").innerHTML = "<b>Tên:</b> " + document.getElementById("nama").value
          document.querySelector(".kelas-peserta").innerHTML = "<b>Lớp:</b> " + document.getElementById("kelas").value
          mulai();
          return false;
        }
      }
    }
  }
  function mulai() {
    intervalWaktu = setInterval(timerGo, 1000);
  }
  function selesai(){
    clearInterval(intervalWaktu);
    console.log(clearInterval(intervalWaktu));
  }
  function timerGo() {
    waktuMulai -= 1e3;
    var l = Math.floor(waktuMulai / 864e5),
        o = Math.floor((waktuMulai % 864e5) / 36e5),
        n = Math.floor((waktuMulai % 36e5) / 6e4),
        s = Math.floor((waktuMulai / 1e3) % 60);
    if (waktuMulai > 0){
      document.querySelector("#waktu-soal").innerHTML = "<b>Thời gian còn lại:</b> " + ("0" + o).slice(-2) + ":" + ("0" + n).slice(-2) + ":" + ("0" + s).slice(-2);
    } else if (waktuMulai < 0 || waktuMulai === 0) {
      document.querySelector("#waktu-soal").innerHTML = "<b>Hết thời gian</b>";
      document.querySelector(".waktu-wrap").style.display = "none";
      document.querySelector(".bank-soal-wrap").style.display = "none";
      document.getElementById("menu-soal").style.display = "none";
      document.getElementById("lihat-hasil-nilai").style.display = "block";
      lihatHasil();
      selesai();
    }
  }
  function lihatHasil(){
    var htmlHasil = "";
    var nilai = ((jumlahBenar/jumlahSoal)*100);
    var nama = document.getElementById("nama").value + " (" + document.getElementById("kelas").value + ")";
    htmlHasil += "<h3>Cảm ơn bạn " + nama + ", đây là điểm của bạn.</h3>";
    htmlHasil += "<p>Câu trả lời đúng: " + jumlahBenar + "</p>";
    htmlHasil += "<p>Câu trả lời sai: " + jumlahSalah + "</p>";
    htmlHasil += "<p>Không có câu trả lời: " + tidakTerjawab + "</p>";
    htmlHasil += "<p>Số điểm: " + nilai + "</p>";
    var htmlJawaban = document.getElementById("hasil-pengerjaan");
    if (htmlJawaban != null){
      htmlJawaban.innerHTML = htmlHasil;
    }
  }
  function done(){
    document.querySelector(".waktu-wrap").style.display = "none";
    document.querySelector(".bank-soal-wrap").style.display = "none";
    document.getElementById("menu-soal").style.display = "none";
    document.getElementById("lihat-hasil-nilai").style.display = "block";
    lihatHasil();
    selesai();
  }
  var tombolMenuSoal = document.querySelectorAll(".lihat-soal");
  if (tombolMenuSoal != null){
    for (var i = 0; i < tombolMenuSoal.length; i++) {
      tombolMenuSoal[i].addEventListener( "click", function() {
        document.getElementById("show-hide-box-soal").classList.toggle("active");
      });
    }
  }
  var soalSelesai = document.getElementById("soal-selesai");
  if (soalSelesai != null){
    soalSelesai.onclick = done;
  }
  var pilgan = document.querySelectorAll("input[type=radio]");
  if (pilgan != null){
    for (var i = 0; i < pilgan.length; i++) {
      pilgan[i].addEventListener( "change", function() {
        jumlahBenar = document.querySelectorAll("input[value=benar]:checked").length;
        jumlahSalah = document.querySelectorAll("input[value=salah]:checked").length;
        tidakTerjawab = jumlahSoal - (jumlahBenar + jumlahSalah);
      });
    }
  }
  var slideSoalIndex = 1;
  showSoalSlide(slideSoalIndex);
  function nextprevSoal(n) {
    showSoalSlide(slideSoalIndex += n);
  }
  function showSoalButton(n) {
    showSoalSlide(slideSoalIndex = n);
  }
  function showSoalSlide(n) {
    var i;
    var slides = document.getElementsByClassName("box-soal");
    var dots = document.getElementsByClassName("tombol-soal");
    if (n > slides.length) {slideSoalIndex = 1}    
    if (n < 1) {slideSoalIndex = slides.length;}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideSoalIndex-1].style.display = "block";  
    dots[slideSoalIndex-1].className += " active";
  }
  document.getElementById("prev-soal").onclick = function(){
    nextprevSoal(-1);
  }
  document.getElementById("next-soal").onclick = function(){
    nextprevSoal(1);
  }
    var tombolSoal = document.querySelectorAll(".tombol-soal");
  for (var i = 0; i < tombolSoal.length; i++) {
    tombolSoal[i].addEventListener( "click", function() {
      var cekNomor = this.getAttribute("data-nomor");
      showSoalButton(cekNomor);
    });
  }
//]]>
</script>
Bước 4: Lưu mẫu
Chúng ta đã lưu mã, bây giờ để tạo câu hỏi luyện tập, bạn có thể tạo bài mới sau đó chọn chế độ HTML (không phải soạn), sau đó dán đoạn mã vào bên dưới:
<!-- Nút bắt đầu -->
<div class='center'>
  <button id='klik-mulai'>Bắt đầu</button>
</div>

<!-- Hộp nhập tên và lớp -->
<div id='input-data'></div>

<!-- Hộp câu hỏi -->
<div id='bank-soal'>
  <div class='waktu-wrap'>
    <div class='data-peserta'>
      <div class='nama-peserta'></div>
      <div class='kelas-peserta'></div>
    </div>
    <!-- Thời gian câu hỏi, thay đổi theo giờ -->
    <div id='waktu-soal' data-waktu='1'></div>
  </div>
  <!-- Số lượng câu hỏi, thay đổi dựa trên số lượng câu hỏi -->
  <div class='bank-soal-wrap' data-soal='3'>
    <!-- Câu hỏi và trả lời -->
    <div class='box-soal'>
      <p>1. Ví dụ một</p>
      <form class='jawaban'>
        <label><input name='radio' type='radio' value='salah'/>Câu hỏi a</label>
        <label><input name='radio' type='radio' value='salah'/>Câu hỏi b</label>
<label><input name='radio' type='radio' value='salah'/>Câu hỏi c</label>
<label><input name='radio' type='radio' value='benar' />Câu hỏi d</label>
</form> </div> <!-- Đóng mã câu hỏi và câu trả lời --> <div class='box-soal'> <p>2. Ví dụ hai</p> <form class='jawaban'> <label><input name='radio' type='radio' value='salah'/>Câu hỏi a</label>
<label><input name='radio' type='radio' value='salah'/>Câu hỏi b</label>
<label><input name='radio' type='radio' value='salah'/>Câu hỏi c</label>
<label><input name='radio' type='radio' value='benar' />Câu hỏi d</label>
</form> </div> <div class='box-soal'> <p>3. Ví dụ ba</p> <form class='jawaban'> <label><input name='radio' type='radio' value='salah'/>Câu hỏi a</label>
<label><input name='radio' type='radio' value='salah'/>Câu hỏi b</label>
<label><input name='radio' type='radio' value='salah'/>Câu hỏi c</label>
<label><input name='radio' type='radio' value='benar' />Câu hỏi d</label>
</form> </div> <!-- Nút Câu hỏi, Điều chỉnh theo số lượng câu hỏi --> <div id='show-hide-box-soal'> <div class='tombol-show-hide lihat-soal'> <span>Đóng</span> </div> <div class='menu-tombol-soal'> <div class='tombol-soal' data-nomor='1'>1</div> <div class='tombol-soal' data-nomor='2'>2</div> <div class='tombol-soal' data-nomor='3'>3</div> </div> </div> </div> <div id='menu-soal'> <div class='next-prev-soal'> <div id='prev-soal' class='prev'> <svg viewBox='0 0 24 24'> <path d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' fill='#000000'></path> </svg> <span>Trước</span> </div> <div id='next-soal' class='next'> <span>Kế tiếp</span> <svg viewBox='0 0 24 24'> <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'></path> </svg> </div> </div> <div class='menu-pilihan-soal'> <button id='lihat-soal' class='lihat-soal'>Menu câu hỏi</button> </div> <div class='tombol-soal-selesai'> <button id='soal-selesai'>Hoàn thành</button> </div> </div> <div id='lihat-hasil-nilai'> <div id='hasil-pengerjaan'></div> <p class='info-keterangan-hasil'>* Gửi kết quả điểm qua Whatsapp, nếu việc khắc phục có thể lặp lại bằng cách nhấp vào <a href='#'>đây</a></p> </div> </div>

Ghi chú:
* data-time = '1', được sử dụng để đặt thời gian thực hiện. Thời gian này là hàng giờ.
* Ví dụ: Nếu bạn điền số 1 sẽ là 1 giờ (01:00:00). Bạn có thể thay đổi nếu cần, nếu bạn chỉ muốn đặt thời gian xử lý thành 30 phút, thay thế bằng 0,5 nếu 90 phút thay bằng 1,5 (sử dụng dấu chấm phẩy)
* data-question = '3', được sử dụng để xác định số lượng câu hỏi. Bạn có thể thay số 3 thành số câu hỏi mà bạn đặt ra, ví dụ số câu hỏi cần làm là 50 thì bạn có thể thay số 3 bằng số 50.

Code để tạo câu hỏi

<!-- Câu hỏi và trả lời -->
    <div class='box-soal'>
      <p>1. Ví dụ một</p>
      <form class='jawaban'>
        <label><input name='radio' type='radio' value='salah'/>Câu hỏi a</label>
<label><input name='radio' type='radio' value='salah'/>Câu hỏi b</label>
<label><input name='radio' type='radio' value='salah'/>Câu hỏi c</label>
<label><input name='radio' type='radio' value='benar' />Câu hỏi d</label>
</form> </div> <!-- Đóng mã câu hỏi và câu trả lời -->
Sử dụng đoạn mã trên để tạo một câu hỏi mới. Mặc định đã có sẵn 3 câu hỏi, bạn chỉ cần thêm lại dưới câu hỏi trước.

Code nút câu hỏi

Ưu điểm của mã câu hỏi thực hành này là tất cả các câu hỏi không xuất hiện trực tiếp, nhưng mỗi câu hỏi xuất hiện hiệu quả hơn, do đó chúng ta cần tạo một nút xem câu hỏi để người thi không gặp khó khăn khi xem câu hỏi mà mình muốn làm như trên.

Cách đặt nút câu hỏi bạn có thể xem đoạn mã dưới đây:
<div class='tombol-soal' data-nomor='1'>1</div>

* data-number = '1', mỗi nút câu hỏi được điều chỉnh theo số lượng câu hỏi bạn đã tạo cùng với số câu hỏi. trong mã có data-number 1 hiển thị khi bấm vào nút sẽ dẫn đến câu hỏi số 1, bạn có thể thay đổi data-number theo số bạn sẽ làm.
* Ví dụ, có 50 câu hỏi, sau đó bạn phải thực hiện 50 nút và dữ liệu số được điều chỉnh theo số thứ tự của câu hỏi.

Trên đây là hướng dẫn cách tạo câu hỏi và trả lời trắc nghiệm trên Blogger. Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Tham khảo: www.azid45.web.id

Khi cuộc đời cho bạn cả trăm lý do để khóc, hãy cho đời thấy bạn có cả ngàn lý do để cười.

Đăng nhận xét

Cám ơn bạn đã quan tâm đặt câu hỏi với chúng tôi!
Chúng tôi sẻ phản hồi sớm nhất cho bạn.
Chúc bạn một ngày tốt đẹp!