Gia Huy

Trang chủ
Blogger

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

Tạo câu hỏi và trả lời trắc nghiệm
·

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
Tạo câu hỏi và trả lời trắc nghiệm trên Blogger
Tạo câu hỏi và trả lời trắc nghiệm trên Blogger

Bạn có thể làm theo hướng dẫn dưới đây:

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

.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}}

Bước 6: Tiếp tục hãy thêm JavaScript sau ngay bên trên vào thẻ </body>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;/body&gt;.

<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 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Bước 8: Vậy là xong! Thêm các mã HTML sau vào Bài đăng trên Blog của bạn thông qua Chế độ xem HTML để hiển thị hộp câu hỏi và trả lời trắc nghiệm.

<!-- 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-waktu='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-soal='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-nomor='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-nomor 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-nomor 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ả!

Copyright © www.azid45.web.id

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.