Saya seorang dosen dan peneliti di Sekolah Tinggi Manajemen Informatika dan Ilmu Komputer [STMIK] Bina Sarana Global, Tangerang. Saya mendapat gelar Sarjana dari IPB University pada tahun 2009. Kemudian saya melanjutkan studi dan menyelesaikan S2 di Universitas Budi Luhur pada tahun 2015 dengan konsentrasi Teknik Komputasi Terapan. Pada tahun 2019, saya mendapat beasiswa untuk melanjutkan Ph.D. D. gelar di Graduate Institute of Digital Learning and Education, National Taiwan University of Science and Technology (NTUST). Penelitian saya berfokus pada pemrosesan gambar, teknik pembelajaran, teknologi pendidikan, e-learning, e-commerce, dan teknologi pertanian. Saya juga menyukai bisnis online, seperti pengoptimalan mesin telusur, analisis ceruk pasar, strategi pemasaran, dll. Muhammad IQbal Hanafri,S. Pi. , M. Kom. Lihat postingan lainnya

Aplikasi Kuis merupakan salah satu aplikasi yang biasa digunakan untuk memberikan pertanyaan berupa pertanyaan seperti tentang buah-buahan, hewan, pahlawan dan berbagai macam pertanyaan lainnya. Nah bagi anda yang ingin membuat aplikasi kuis menggunakan html atau java dan ingin membuat aplikasi kuis yang berisi soal, soal bisa berupa soal yang berisi soal pendidikan, agama, hewan, tumbuhan dan lain sebagainya.

Nah pada kesempatan kali ini jooinfoo ingin memberikan tutorial dan source code cara membuat aplikasi kuis dengan javascript. jadi disini digunakan javascript sebagai pengolahnya, HTML sebagai frame dan css sebagai tampilan menjadi lebih cantik

Ya, masuk saja ke tutorial pertama, buka editor teks Anda lalu buka file bernama index. html, gaya. css dan index. js. Saya akan memberikan sedikit penjelasan terlebih dahulu tentang penggunaan fle terebut dimana html sama bagusnya dengan viewer atau frame, style. css untuk mempercantik dan mengindeks. js untuk diproses dari aplikasi kuis kami

1. Oke langsung saja buat file dengan nama index. html berikut kodenya

<. DOCTYPE html>




 



 




<. DOCTYPE html>





 

Belajar Kuis Matematika

   

Berikutnya

Sebelumnya

Mulai dari Awal

<. -- Berikutnya
Sebelumnya
      Start Over -->
     

 

2. Setelah itu buat file index. js dikodekan sebagai berikut

(fungsi() {
var pertanyaan = [{
pertanyaan. "Berapa 2*5?",
pilihan. [2, 5, 10, 15, 20],
jawaban yang benar. 2
}, {
pertanyaan. "Berapa Hasil dari 3*6?",
pilihan. [3, 6, 9, 12, 18],
jawaban yang benar. 4
}, {
pertanyaan. "Berapa Hasil dari 8*9?",
pilihan. [72, 99, 108, 134, 156],
jawaban yang benar. 0
}, {
pertanyaan. "Berapa Hasil dari 1*7?",
pilihan. [4, 5, 6, 7, 8],
jawaban yang benar. 3
}, {
pertanyaan. "Apa itu 8*8?",
pilihan. [20, 30, 40, 50, 64],
jawaban yang benar. 4
}];
 
var Penghitung soal = 0;
var pilihan = [];
var kuis = $('#kuis');
 
// Menampilkan pertanyaan awal
tampilkanBerikutnya();
 
// Klik penangan untuk tombol 'selanjutnya'
$('#berikutnya'). pada('klik', fungsi (e) {
e. preventDefault();
   
// Tangguhkan pemroses klik selama animasi memudar
jika (kuis. adalah('. animasi')) {
kembali salah;
}
Pilih();
   
// Jika tidak ada pilihan pengguna, progres dihentikan
if (isNaN(selections[questionCounter])) {
alert('Silahkan pilih. ');
} kalau tidak {
Penghitung soal++;
tampilkanBerikutnya();
}
});
 
// Klik penangan untuk tombol 'sebelumnya'
$('#sebelumnya'). pada('klik', fungsi (e) {
e. preventDefault();
   
jika (kuis. adalah('. animasi')) {
kembali salah;
}
Pilih();
penghitung pertanyaan--;
tampilkanBerikutnya();
});
 
// Klik penangan untuk tombol 'Mulai Dari Awal'
$('#mulai'). pada('klik', fungsi (e) {
e. preventDefault();
   
jika (kuis. adalah('. animasi')) {
kembali salah;
}
Penghitung soal = 0;
pilihan = [];
tampilkanBerikutnya();
$('#mulai'). bersembunyi();
});
 
// Menganimasikan tombol saat melayang
$('. tombol'). pada('mouseenter', fungsi () {
$(ini). addClass('aktif');
});
$('. tombol'). pada('mouseleave', fungsi () {
$(ini). hapusKelas('aktif');
});
 
// Membuat dan mengembalikan div yang berisi pertanyaan dan
// pilihan jawaban
fungsi createQuestionElement(indeks) {
    var qElement = $('

', {
Indo. 'pertanyaan'
});
   
    var header = $('

Pertanyaan ' + (index + 1) + ':

');
qElement. tambahkan(tajuk);
   
    var question = $('

').append(questions[index].question);
qElement. tambahkan(pertanyaan);
   
var radioButtons = createRadios(indeks);
qElement. tambahkan(Tombol radio);
   
kembalikan qElement;
}
 
// Membuat daftar pilihan jawaban sebagai input radio
fungsi createRadios(indeks) {
    var radioList = $('

');
item var;
var masukan = '';
for (var i = 0; i < pertanyaan[indeks]. pilihan. panjangnya;
      item = $('
• ');
        input = '';
  masukan += pertanyaan[indeks]. pilihan[i];
  item. tambahkan(masukan);
  Daftar radio. tambahkan(item);
  }
  kembali daftar radio;
  }
   
  // Membaca pilihan pengguna dan mendorong nilai ke array
  fungsi pilih() {
  pilihan[penghitungpertanyaan] = +$('masukan[nama="jawaban"]. diperiksa'). val();
  }
   
  // Menampilkan elemen yang diminta berikutnya
  fungsi tampilkanBerikutnya() {
  ulangan. fadeOut(fungsi() {
  $('#pertanyaan'). menghapus();
       
  if (questionCounter < pertanyaan. panjangnya){
  var nextQuestion = createQuestionElement(questionCounter);
  ulangan. tambahkan (Pertanyaan berikutnya). fadeIn();
  jika (. (isNaN(pilihan[penghitung pertanyaan]))) {
  $('input[value='+selections[questionCounter]+']'). prop('diperiksa', benar);
  }
         
  // Mengontrol tampilan tombol 'sebelumnya'
  jika(penghitungpertanyaan === 1){
  $('#sebelumnya'). menunjukkan();
  } else if(questionCounter === 0){
           
  $('#sebelumnya'). bersembunyi();
  $('#berikutnya'). menunjukkan();
  }
  }kalau tidak {
  var scoreElem = displayScore();
  ulangan. tambahkan(skorElem). fadeIn();
  $('#berikutnya'). bersembunyi();
  $('#sebelumnya'). bersembunyi();
  $('#mulai'). menunjukkan();
  }
  });
  }
   
  // Menghitung skor dan mengembalikan elemen paragraf untuk ditampilkan
  fungsi displayScore() {
      var score = $('

  ',{id: 'question'});
     
  var numBenar = 0;
  untuk (var i = 0; i < pilihan. panjangnya;
  jika (pilihan[i] === pertanyaan[i]. jawaban yang benar) {
  numBenar++;
  }
  }
     
  skor. append('Anda Menjawab ' + numCorrect + ' pertanyaan dari ' +
  pertanyaan. panjang + ' benar. ');
  skor pengembalian;
  }
  })();

3. Kemudian untuk mempercantik tampilan kita tambahkan coding css sebagai berikut

tubuh {
font-family. Buka Sans;
}

h1 {
perataan teks. tengah;
}

#judul {
dekorasi teks. digarisbawahi;
}

#ulangan {
teks-indent. 10px;
menampilkan. tidak ada;
}

tombol {
berbatasan. 4px padat;
radius perbatasan. 5px;
lebar. 40px;
padding-kiri. 5px;
padding-kanan. 5px;
posisi. relatif;
mengambang. Baik;
warna latar belakang. #DCDCDC;
warna. hitam;
margin. 0 2px 0 2px;
}

tombol. aktif {
warna latar belakang. #F8F8FF;
warna. #525252;
}

tombol {
posisi. relatif;
mengambang. Baik;
}

tombol a {
dekorasi teks. tidak ada;
warna. hitam;
}

#wadah {
lebar. 50%;
margin. mobil;
lapisan. 0 25px 40px 10px;
warna latar belakang. #ff1e9d;
berbatasan. 4px padat #B0E0E6;
radius perbatasan. 5px;
warna. #FFFFFF;
font-berat. berani;
bayangan kotak. 5px 5px 5px #888;
}

ul {
daftar-gaya-jenis. tidak ada;
lapisan. 0;
margin. 0;
}

#prev {
menampilkan. tidak ada;
}

#Mulailah {
menampilkan. tidak ada;
lebar. 90px;
}

Baca Juga

Cara Membuat Jam Digital dengan HTML, JS dan CSS

Pelajari HTML5. Cara Menggunakan Area Pandang

Jika sudah, silahkan coba di browser anda untuk menambahkan soal atau edit soal bisa dilakukan di bagian index. js untuk query berupa teks bisa menggunakan string