Skip to main content
Home Blogger Tutorial Cara Membuat Soal Latihan di Blogger Tampilan Keren

Cara Membuat Soal Latihan di Blogger Tampilan Keren

Cara Membuat Soal Latihan di Blogger Tampilan Keren

www.azid45.web.id - Cara Membuat Soal Latihan di Blogger Tampilan Keren. Assalamualaikum.Wr.Wb semuanya pada kesempatan kali ini saya akan membagikan source code membuat soal latihan dengan menggunakan CSS,HTML, dan Javascript. Tampilannya sudah saya desain seperti model soal UNBK dimana memiliki fitur sebagaimana berikut:

  • Terdapat Box input nama dan kelas seperti tutorial kuis soal - Wendy Code
  • Terdapat timer berdasarkan jam dengan format jam:menit:detik
  • Menampilkan soal dengan model slide show agar lebih minimalis
  • Terdapat menu nomor soal untu mempermudah melihat soal yang belum dikerjakan
  • Tampilan yang keren seperti UNBK

Jika Anda tertarik untuk membuat ini, Anda bisa mengikuti tutorialnya berikut ini:

Pertama, masuk ke menu Thema - Edit HTML

Kedua, cari kode </head> dan taruh kode berikut ini diatas kode tersebut

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

Ketiga, cari kode </body> dan taruh kode berikut ini diatas kode tersebut

<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='Nama Lengkap' type='text' autocomplete='off'/></label>";
    htmlData += "<label for='kelas'><input id='kelas' placeholder='Kelas' type='text' autocomplete='off'/></label>";
    htmlData += "</form>";
    htmlData += "<button id='mulai-mengerjakan'>Kerjakan</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>Nama:</b> " + document.getElementById("nama").value
          document.querySelector(".kelas-peserta").innerHTML = "<b>Kelas:</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>Sisa waktu:</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>Waktu Habis</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>Terimakasih " + nama + ", berikut adalah nilai Anda.</h3>";
    htmlHasil += "<p>Jawaban Benar: " + jumlahBenar + "</p>";
    htmlHasil += "<p>Jawaban Salah: " + jumlahSalah + "</p>";
    htmlHasil += "<p>Tidak Dijawab: " + tidakTerjawab + "</p>";
    htmlHasil += "<p>Nilai: " + 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>

Keempat, Save Template

Untuk kode sudah kita simpan, sekarang untuk membuat soal latihan bisa membuat postingan baru kemudian pilih mode HTML (bukan compose), setelah itu paste kode dibawah ini:

<!-- Tombol Mulai -->
<div class='center'>
  <button id='klik-mulai'>Mulai</button>
</div>

<!-- Box Input Nama dan Kelas -->
<div id='input-data'></div>

<!-- Box Soal -->
<div id='bank-soal'>
  <div class='waktu-wrap'>
    <div class='data-peserta'>
      <div class='nama-peserta'></div>
      <div class='kelas-peserta'></div>
    </div>
    <!-- Waktu Soal, Ganti berdasarkan jam -->
    <div id='waktu-soal' data-waktu='1'></div>
  </div>
  <!-- Jumlah Soal, Ganti berdasrkan jumlah soal -->
  <div class='bank-soal-wrap' data-soal='3'>
    <!-- Pertanyaan dan Jawaban -->
    <div class='box-soal'>
      <p>1. Contoh satu</p>
      <form class='jawaban'>
        <label><input name='radio' type='radio' value='salah'/>jawaban a</label>
        <label><input name='radio' type='radio' value='salah'/>jawaban b</label>
        <label><input name='radio' type='radio' value='salah'/>jawaban c</label>
        <label><input name='radio' type='radio' value='benar' />jawaban d</label>
      </form>
    </div>
    <!-- Penutup kode pertanyaan dan jawaban -->
    <div class='box-soal'>
      <p>2. Contoh dua</p>
      <form class='jawaban'>
        <label><input name='radio' type='radio' value='salah'/>jawaban a</label>
        <label><input name='radio' type='radio' value='salah'/>jawaban b</label>
        <label><input name='radio' type='radio' value='salah'/>jawaban c</label>
        <label><input name='radio' type='radio' value='benar' />jawaban d</label>
      </form>
    </div>
    <div class='box-soal'>
      <p>3. Contoh tiga</p>
      <form class='jawaban'>
        <label><input name='radio' type='radio' value='salah'/>jawaban a</label>
        <label><input name='radio' type='radio' value='salah'/>jawaban b</label>
        <label><input name='radio' type='radio' value='salah'/>jawaban c</label>
        <label><input name='radio' type='radio' value='benar' />jawaban d</label>
      </form>
    </div>
    <!-- Tombol Soal, Sesuaikan dengan jumlah soal -->
    <div id='show-hide-box-soal'>
      <div class='tombol-show-hide lihat-soal'>
        <span>close</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>Sebelumnya</span>
      </div>
      <div id='next-soal' class='next'>
        <span>Selanjutnya</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 Soal</button>
    </div>
    <div class='tombol-soal-selesai'>
      <button id='soal-selesai'>Selesai</button>
    </div>
  </div>
  <div id='lihat-hasil-nilai'>
    <div id='hasil-pengerjaan'></div>
    <p class='info-keterangan-hasil'>*Kirim hasil nilai via whatsapp, bila remidial bisa ulangi lagi dengan klik <a href='#'>mulai</a></p>
  </div>
</div>

Keterangan:

data-waktu='1', digunakan untuk mengatur waktu pengerjaan. Waktu ini berdasarkan jam. Contoh bila di isi 1 maka waktu pengerjaan adalah 1 jam (01:00:00). Anda bisa mengubah sesuai kebutuhan misalnya hanya ingin mengatur waktu pengerjaan 30 menit maka ganti dengan 0.5 bila 90 menit ganti dengan 1.5 (pakai titik tidak koma)

data-soal='3', digunakan untuk menentukan jumlah soal. Anda bisa mengubah angka 3 menjadi jumlah soal yang Anda buat, misal jumlah soal yang akan dikerjakan adalah 50 maka Anda bisa mengganti 3 dengan angka 50

kode membuat soal

    <!-- Pertanyaan dan Jawaban -->
    <div class='box-soal'>
      <p>1. Contoh satu</p>
      <form class='jawaban'>
        <label><input name='radio' type='radio' value='salah'/>jawaban a</label>
        <label><input name='radio' type='radio' value='salah'/>jawaban b</label>
        <label><input name='radio' type='radio' value='salah'/>jawaban c</label>
        <label><input name='radio' type='radio' value='benar' />jawaban d</label>
      </form>
    </div>
    <!-- Penutup kode pertanyaan dan jawaban -->

Gunakan kode diatas untuk membuat soal baru. Secara default ada 3 soal yang sudah tersedia Anda tinggal menambahkannya lagi dibawah soal sebelumnya

kode tombol soal

Kelebihan dari kode soal latihan ini soal tidak tampil langsung semuanya namun muncul setiap soal agar lebih efesien oleh karena itu kita butuh membuat tombol untuk melihat soal agar peserta ujian tidak kesulitan melihat soal yang ingin dia kerjakan.

Cara membuat tombol soal bisa lihat kode dibawah ini:


<div class='tombol-soal' data-nomor='1'>1</div>

data-nomor='1', setiap tombol soal sesuaikan dengan jumlah soal yang Anda buat beserta nomor soalnya. pada kode tersebut ada data-nomor 1 yang menunjukkan ketika klik tombol tersebut akan mengarah pada soal nomor 1, Anda bisa mengganti data-nomor sesuai dengan nomor yang akan Anda buat. Contoh soal ada 50 maka Anda harus membuat tombol sebanyak 50 dan data nomor disesuaikan nomor urut soal.

Untuk melihat demo Anda bisa klik mulai dibawah ini:

1. Contoh satu

2. Contoh dua

3. Contoh tiga

close
1
2
3

*Kirim hasil nilai via whatsapp, bila remidial bisa ulangi lagi dengan klik mulai

Demikianlah tutorial tentang Cara Membuat Soal Latihan di Blogger dengan Javascript. Semoga bermanfaat. Amin

Source Code:

https://inwepo.co/cara-membuat-quiz-dengan-radio-button/
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

author-photo Blogger Tutorial

PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar
Close Disqus
Close Translate