Repositori ini merupakan writeup project untuk mengimplementasi quiz HSI menggunakan Django. Spesifikasi yang diberikan adalah sebagai berikut:
- Membuat bank soal kurang lebih 5 soal.
- Membuat halaman HTML untuk admin yang menampilkan seluruh butir soal yang tersedia.
- Membuat tampilan HTML untuk peserta mengerjakan soal. Munculkan 2 soal saja secara acak.
- Pengerjaan evaluasi dan cek jawaban menggunakan javascript bisa menunjukkan benar salah pengerjaaan
Pengerjaan project menggunakan stack berikut:
- Django v4.0.3,
- Python v3.8.2,
- Bootstrap 4 (lengkap dengan third party library yang dibutuhkan seperti JQuery)
Bank soal yang diimplementasi menggunakan resource yang telah dibuat pada level kelas sebelumnya. Bank soal dibuat dalam format file json. Konten bank soal dapat dilihat pada quiz/data/questions.json
Bank soal yang disimpan dalam bentuk file json diproses terlebih dahulu menjadi bentuk yang mudah untuk digunakan. Struktur soal yang selanjutnya akan digunakan adalah sebagai berikut.
{
"no": <int>,
"query": <string>,
"choice": [<Choice>]
}
{
"no": <int>,
"content": <string>,
"is_correct": <int:0|1>
}
Untuk mempermudah preprocessing, dibuat dua fungsi. Fungsi pertama bertugas untuk membaca file json, dan fungsi kedua bertugas untuk memberikan penomoran pada setiap object model.
Halaman admin dibuat dengan memanfaatkan template syntax for
untuk mengiterasi object model Question dan Choice. Untuk tata letak, digunakan <table>
. Tata letak daftar pilihan jawaban juga menggunakan <table>
, sehingga ada sebuah <table>
di dalam <table>
. Lalu untuk memberi highlight jawaban mana yang merupakan jawaban yang benar, <td>
sel jawaban yang benar diberi warna hijau dan teksnya dicetak tebal.
Halaman quiz dibuat dengan memanfaatkan css class .form-check
dari Bootstrap. Class .form-check
akan digunakan untuk mengelompokkan <input type="radio">
dengan teks pilihan jawaban. Sehingga template markup yang digunakan adalah sebagai berikut.
<div class="form-check">
<input type="radio" class="form-check-input" name="q$" id="q$-a&" value="{{ option.is_correct }}">
<label for="q$-a&" class="form-check-label">(teks jawaban)</label>
</div>
dimana:
- nilai
$
akan diganti dengan nomor urutan soal, - nilai
&
akan diganti dengan nomor urutan pilihan, - nilai
@
akan diganti dengan nilai apakah jawaban yang bersangkutan merupakan jawaban yang benar (berupa nilai string1
atau0
)
Template ini akan digunakan untuk memberikan feedback penilaian setelah pengerjaan quiz selesai.
Ketika pengguna menyelesaikan pengerjaan, client akan memeriksa jawaban yang dipilih (jika ada) dan memeriksa apakah jawaban tersebut benar atau salah. Secara garis besar, alur pemeriksaan yang dilakukan adalah sebagai berikut:
- Highlight semua jawaban yang seharusnya dipilih oleh pengguna dengan warna biru
- Untuk setiap pertanyaan,
- Periksa apakah ada jawaban yang terpilih
- Jika ada jawaban yang terpilih, periksa apakah
value
jawaban terpilih bernilai1
atau bukan.- Jika ya, skor untuk pertanyaan yang bersangkutan adalah
2
. Highlight jawaban tersebut dengan warna hijau. Ini akan menimpa warna highlight pada langkah 1 - Jika tidak, skor untuk pertanyaan yang bersangkutan adalah
1
. Highlight jawaban tersebut dengan warna merah
- Jika ya, skor untuk pertanyaan yang bersangkutan adalah
- Jika tidak ada jawaban yang terpilih, skor untuk pertanyaan yang bersangkutan adalah
0
.
- Jika ada jawaban yang terpilih, periksa apakah
- Tampilkan skor pertanyaan di bawah nomor pertanyaan
- Tambahkan skor pertanyaan ke skor keseluruhan
- Periksa apakah ada jawaban yang terpilih
Alur ini akan memberikan skor total. Skor total akan dimunculkan di bagian atas halaman quiz setelah pengerjaan selesai. Pada saat itu, halaman quiz akan membekukan jawaban sehingga pengguna tidak bisa mengubah jawaban.
Route web untuk quiz menggunakan segment quiz/
sebagai base segmentnya. Halaman pengerjaan quiz bisa diakses pada url quiz/
(yaitu menggunakan base segment), dan halaman admin quiz bisa diakses pada url quiz/admin/
.