Sistem Ujian Online Sesuai Mata Pelajaran dan NIK (Nomor Induk Kesiswaan) Menggunakan Web Apps Script.

1. Copy Spreadsheet (Klik Disini)

2. Pada Spreadsheet yang telah di copy di atas, terdapat beberapa sheet dengan nama masing-masing mata pelajaran.

3. Pada setiap sheet tersebut terdapat beberapa kolom yaitu

Kolom A (Nomor Soal) : Diisi dengan nomor urut soal/pertanyaan.

Kolom B (Pertanyaan) : Diisi dengan pertanyaan.

Kolom C (Gambar Soal) : Apabila pertanyaannya memiliki sebuah gambar silahkan url gambar tersebut di masukkan ke kolom C.

Kolom D - G (Jawaban A,B,C,D) : Silahkan sesuaikan untuk pilihan jawaban.

Kolom H - K (Skor) : Silahkan sesuaikan skor pada jawaban, Misal : Jawaban A Benar Maka Skor A 100.

Kolom L - O (Informasi Siswa) : Silahkan sesuaikan dengan informasi siswa dan matapelajaran sesuaikan dengan nama sheet.

Kolom P - Q (Hasil) : Kolom tersebut akan terisi apabila pertanyaan sudah di selesaikan.

4. Buatlah lembar kerja Apps Script, dengan cara klik menu Ektensi/Extensions lalu pilih Apps Script.

5.Terdapat 4 file default yaitu :

Code.gs
index.html
css.html
js.html

6. Copy dan pastekan script di bawah ini ke Code.gs

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

//Javabitpro
//www.javabitpro.com

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function include(file){ return HtmlService.createHtmlOutputFromFile(file).getContent()}


function getURL() { return url = ScriptApp.getService().getUrl();}


function getDataQuestion(wsname){
  var data = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(wsname).getDataRange().getDisplayValues().slice(1)
      .filter(d => d[0] !== "")
  return data;
}

function searchData(id,wsname){
   var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(wsname)
   var data=ss.getDataRange().getDisplayValues().slice(1)
   var row = data.find(r=>{
    return r[12]== id && r[15] ==""
   })
   return row
}


function recordData(idstd,result,wsname)  {
const ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(wsname);
var data=ss.getDataRange().getValues()
const date = new Date()
const dayThai = date.toLocaleDateString('id-ID', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
})
const rowIndex = data.findIndex(r => r[12] == idstd) + 1
  if(rowIndex >0){
    ss.getRange(rowIndex,16).setValue(dayThai)
    ss.getRange(rowIndex,17).setValue(result)
  }else{
    return false
  }
//Javabitpro
//www.javabitpro.com
}

7. Copy dan pastekan script di bawah ini ke index.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<html>
	<head>
		<title>Sistem Ujian Online</title>
    <?!=include('css')?>
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	</head>
	<body>
		

<div id="container">
  <header>
    <h1>Ujian Online</h1>
    <p>Mata Pelajaran <strong>Kelas XII</strong> Dengan Jumlah <span id="countmax"></span> Pertanyaan </p>

    
    
  </header>
  <p>Petunjuk</p>
    <p>1. Pilih Mata Pelajaran</p>
    <p>2. Masukkan Nomor Induk Kesiswaan (NIK)</p>
    <p>3. Selamat Mengerjakan</p>
  <section>
    <div class="row g-3 mt-1 mb-2">
  <div class="col-sm-2">
       <select id="wsname" class="form-select">
      <option selected>Pilih Mata Pelajaran...</option>
      <option>Matematika</option>
      <option>Bin</option>
      <option>Bing</option>
      <option>IPA</option>
      <option>IPS</option>
      <option>Agama</option>
    </select>
  </div>
  <div class="col-sm-2">
    <input type="text" class="form-control" placeholder="Masukkan NIK" id="idSTD" oninput="searchID(this.value)" maxlength="4">
  </div>
  <div class="col-sm-8">
    <input type="text" class="form-control" placeholder="Nama" id="name" readonly>
  </div>
</div>
  <div class="row g-3 mt-1 mb-2">
        <img src="">
 </div>

     <div id="quizForm" style="display:none" >
      <div id="productbox" class="product"></div>
    </div>
      <button type="button" class="btn btn-info" id="btnsave" style="display:none">Kirim Jawaban</button>
  </section>
</div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" ></script>
    <?!=include('js')?>
	</body>
</html>
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:52px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:52px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:20%}}</style><div class="disclaimer">Version.05.22.23 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>

8. Copy dan pastekan script di bawah ini ke css.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<style>
body {
  color: white;
  font-family: "Lato", sans-serif;
  font-size: 16px;
}

[id="container"] {
  width: 50vw;
  background: white;
  color: #000;
  margin: 20px auto;
  overflow: auto;
  padding: 2.6rem;
  border: 3px solid #106feb;
  border-radius: 25px;
}

header {
  text-align: center;
  border-bottom: #e7d8c9 dashed 1px;
}

header h1 {
  margin: 0;
  padding: 0;
}

header p {
  padding: 0;
  margin-top: 5px;
  color: #000;
}

</style>

9. Copy dan pastekan script di bawah ini ke js.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<script>

   function createTable(item) {
    var html = '';
    var maxitem = item.length
    for (let i = 0; i < item.length; i++) {
        html += '<div class="form-check"><label>'
                       +'&nbsp;<span style="color: black" class="question">'+ item[i][0] +'. '+ item[i][1] +'</span>'
                       +'&nbsp;<div class="text-center"><img class="img-fluid" src="'+ item[i][2] +'"></div>'
                        + '<div>'
                        + '<input name="q'+item[i][0]+'" type="radio" id="d' + item[i][1] + '" value="'+ item[i][7] + '" class="me-2">'
                        + '<span class="inner-label">A. ' + item[i][3] + '</span>'
                        + '</div>'
                        + '<div>'
                        + '<input name="q'+item[i][0]+'" type="radio" id="d' + item[i][2] + '" value="'+ item[i][8] + '" class="me-2">'
                        + '<span class="inner-label">B. ' + item[i][4] + '</span>'
                        + '</div>'
                        + '<div>'
                        + '<input name="q'+item[i][0]+'" type="radio" id="d' + item[i][3] + '" value="'+ item[i][9] + '" class="me-2">'
                        + '<span class="inner-label">C. ' + item[i][5] + '</span>'
                        + '</div>'
                        + '<div>'
                        + '<input name="q'+item[i][0]+'" type="radio" id="d' + item[i][4] + '" value="'+ item[i][10] + '" class="me-2">'
                        + '<span class="inner-label">D. ' + item[i][6] + '</span>'
                        + '</div>'                     
                       +'</label></div>'
                       +'<hr>'
    }
    $("#productbox").html(html)
    $("#countmax").text( maxitem)
   }




  document.querySelector(".btn").addEventListener("click", submitData);
  function submitData(){
    event.preventDefault()
    var idstd =  $('#idSTD').val()
    var max =  $('#countmax').text()
    var wsname =  $('#wsname').val()

      let data = []
      $("input:checked").each(function() {
          const radioValue = this.value
          data.push(radioValue);
        });


console.log(max)

    if(data.length < parseInt(max)){
            Swal.fire(
            'Harap Jawab Semua Pertanyaan!',
          )
    }else{
      const result = data.reduce((sum,number) => {
        return parseInt(sum)+parseInt(number)
      }, 0)

      google.script.run.withSuccessHandler(function(output){
       Swal.fire(
            'Hasil Ujian Disimpan',
          )
           }).recordData(idstd,result,wsname) 
    }

    }


    function searchID(id){
       var wsname =  $('#wsname').val()
        if(id!=""&& id.length==4){
       google.script.run.withSuccessHandler((output)=>{
        if(output!=null){
       Swal.fire(
            'Data Ditemukan',
          )
        $('#name').val(output[13])
        google.script.run.withSuccessHandler(createTable).getDataQuestion(wsname);
        $('#btnsave').show()
        $('#quizForm').show()
        }else{
           Swal.fire(
            'Data Tidak Ditemukan atau Sudah Mengisi Ujian',
          )
        $('#idSTD').val("")
        $('#name').val("")

        }
          }).searchData(id,wsname) 
        }
    }
 
</script>