PROJECT SEDERHANA JAVASCRIPT #9 MODUL 7

 

Exam Generator

1. Bagian HTML:

   1. Formulir:

      • Terdapat formulir dengan input untuk pertanyaan, opsi, dan batas waktu.
      • Terdapat sebuah tombol "Generate" yang, ketika diklik, akan memanggil fungsi generateQuestion().

   2. Tabel:

      • Tabel dengan ID tableExam untuk menampilkan pertanyaan, opsi, dan batas waktu.
      • Kolom "No" untuk nomor urut pertanyaan.
      • Kolom "Question" untuk pertanyaan yang memiliki colspan sebanyak 4 kolom.
      • Kolom "Time" untuk menampilkan batas waktu.

   3. Script:

      • Terdapat pautan ke file JavaScript eksternal (script.js) yang berisi logika untuk menghasilkan pertanyaan dan menghitung mundur waktu.

   Bagian CSS (style.css):

   1. Gaya Tabel:
      • Mengatur properti gaya untuk tabel, termasuk ketebalan garis dan margin.

   Bagian JavaScript (script.js):

1. Variabel Global:

   • tableExam: Merujuk ke elemen tabel dengan ID tableExam.
   • questionNumber: Menyimpan nomor urut pertanyaan.

2. Fungsi stringToArray:

   • Mengubah string opsi pertanyaan menjadi array.
   • Membuat array dari kata-kata yang dipisahkan oleh koma.

3. Fungsi generateQuestion:

• Mencegah perilaku bawaan formulir dengan menggunakan event.preventDefault().
• Membuat elemen tbody baru untuk setiap pertanyaan.
• Membuat elemen tr untuk menyimpan nomor urut, pertanyaan, dan batas waktu.
• Mengatur atribut rowspan untuk elemen td nomor urut dan batas waktu.
• Membuat elemen tr2 untuk menyimpan opsi pertanyaan.
• Membuat elemen td2 untuk setiap opsi, termasuk elemen radio.
• Menambahkan elemen-elemen ke dalam tabel.
• Menghitung mundur waktu dengan menggunakan interval dan mengubah tampilan waktu setiap detik.
• Menampilkan peringatan ketika waktu habis.
2. FULL CODE: https://github.com/2ndmurphy/Exam-Generator