Membuat Aplikasi "Math Quiz" dengan Visual Studio

Pada tulisan kali ini akan menjelaskan cara membuat aplikasi Math Quiz sederhana. Tool yang digunakan adalah Visual Studio 2015. Bahasa pemrograman yang akan digunakan adalah C# dan XAML.

Aplikasi Math Quiz ini adalah aplikasi yang menampilkan kuis matematika sederhana dan user harus menjawabnya dengan benar. Setelah itu aplikasi ini akan generate soal lain dengan angka random.

Langkah-langkah:

Pertama, klik pada New Project -> Visual C# -> Universal -> Blank App.

  

Ada beberapa hal yang harus diperhatikan ketika memilih Blank App Template. Lihat pada bagian Solution Explorer, ada file yang bernama MainPage.xaml dan ketika di-expand akan ada file MainPage.xaml.cs.(Pilih Window -> Reset Window Layout jika Solution Explorer tidak kelihatan).

MainPage.xaml adalah file yang digunakan untuk mengatur dan mendesain tampilan aplikasi. Sedangkan MainPage.xaml.cs digunakan untuk membuat fungsional dan logika dari aplikasi.  

Double-click pada MainPage.xaml untuk membuka file tersebut, maka visual studio akan membuat tampilan dalam tiga bagian. Bagian pertama disebut designer dimana kita dapat melihat user interface dari aplikasi kita(tampilan masih kosong karena kita memilih blank app template). Bagian kedua adalah XAML, yaitu kode markup yang membangun user interface. Bagian ketiga adalah Toolbox, yaitu bagian yang terdapat kumpulan kontrol yang dapat kita gunakan dalam aplikasi.

Pada toolbox, klik pada Common XAML Controls, lalu pilih sebuah Button, kemudian drag button tersebut ke designer sehingga akan muncul sebuah button pada designer. Ketika kita klik pada button tersebut, perhatikan pada bagian Properties di sudut kanan bawah((Pilih Window -> Reset Window Layout jika Properties tidak kelihatan). Ada kotak name yang berfungsi untuk memberi nama pada button, lalu kotak content untuk mengatur tampilan teks pada button.

Ubahlah name pada button tersebut menjadi answer_btn dan content-nya menjadi Answer. 

Kembali lagi pada toolbox, drag empat Textblock dan satu Textbox ke designer lalu susun seperti pada gambar di bawah ini.

Beri nama operand1 pada textblock paling kiri dan text-nya ?, lalu textblock di sebelahnya diberi nama operator dengan text +, di sebelahnya lagi diberi nama operand2 dengan text ?,  kemudian textblock keempat diberi nama equal dengan text =. Textbox yang berada paling kanan diberi nama user_ans dengan text kosong.

Tambah dua button lagi dan satu textblock ke designer. Yang pertama diberi nama generate_question dengan text  Generate Question lalu letakkan button tersebut pada bagian atas, yang satunya diberi nama start_btn dengan text Start dan letakkan di bawah button answer. Kemudian textblock diberi nama message dengan text kosong.

Langkah selanjutnya adalah kita akan membuat fungsi-fungsi dari kontrol yang telah kita letakkan pada designer tadi. Pada Solution Explorer, buka file MainPage.xaml.cs. Perhatikan konstruktor yang terdapat pada baris ke-25 sampai 28.

Konstruktor tersebut akan langsung dieksekusi ketika kita membuka halaman MainPage pada saat menjalankan aplikasi(saat ini secara default halaman yang terbuka pertama kali adalah MainPage). Jadi, ada beberapa hal yang harus dilakukan pada saat aplikasi baru dijalankan. Pertama, user tidak boleh menekan tombol Answer, Generate Question, maupun mengisi jawaban pada Textbox. User hanya dapat menekan tombol Start Quiz. Agar hal-hal tersebut tidak terjadi, kita dapat menonaktifkan ketiga kontrol tersebut. Pada kode C#, kita dapat menonaktifkan suatu kontrol tersebut dengan mengetik nama dari kontrol yang bersangkutan lalu membuat properti IsEnabled-nya menjadi false. Tambahkan kode berikut ini di bawah kode this.InitializeComponent();

// menonaktifkan kontrol user_ans, generate_question, dan answer_btn
user_ans.IsEnabled = false;
generate_question.IsEnabled = false;
answer_btn.IsEnabled = false;

Coba jalankan aplikasi tersebut dengan menekan Ctrl+F5 atau dengan klik tombol Local Machine lalu lihat hasilnya.

Ketiga kontrol tadi tidak bisa digunakan karena kode yang kita buat untuk menonaktifkan ketiga kontrol tersebut tereksekusi pada saat aplikasi baru dijalankan.

Langkah selanjutnya kita akan membuat fungsi pada tombol Start. Terlebih dahulu close aplikasi yang kita jalankan tadi. Klik dua kali pada tombol start maka Visual Studio secara otomatis membuat fungsi dengan nama start_btn_Click(nama_button_Click) pada MainPage.xaml.cs. Fungsi ini akan dieksekusi ketika kita klik pada tombol Start. Pada saat user mengklik tombol Start, tombol Answer dan textbox yang kita nonaktifkan sebelumnya akan diaktifkan, membuat soal secara random, lalu menghilangkan tombol Start tersebut.

Cara mengaktifkan tombol Answer dan textbox tadi ialah dengan membuat properti IsEnabled-nya menjadi true. Lalu membuat tombol Start hilang dengan membuat properti Visibility pada start_btn menjadi Visibility.Collapsed. Kemudian kita akan membuat dua bilangan acak yang akan ditampilkan pada textblock operand1 dan operand2. Agar dapat membuat bilangan acak, kita instantiate objek dengan class Random. Lalu pada objek random tersebut kita akses method Next() yang memiliki dua argumen. Argumen pertama adalah batas bawah jangkauan pengacakan nilai, argumen kedua adalah batas atas. Misal pada method Next(0, 30), berarti method tersebut akan membuat bilangan acak dari 0 sampai 30. Ketika bilangan acak tersebut telah dibuat, maka selanjutnya bilangan tersebut dikonversikan menjadi string dengan ToString() agar dapat disimpan pada properti Text dari operand1 dan operand2.

Tambahkan kode berikut ini di dalam fungsi start_btn_Click.

// mengaktifkan kontrol user_ans dan answer_btn
user_ans.IsEnabled = true;
answer_btn.IsEnabled = true;

// membuat dua bilangan acak lalu ditampilkan pada textblock operand1 dan operand2
// bilangan yang ditampilkan adalah acak dari 0 sampai 30
Random rand = new Random();
operand1.Text = rand.Next(0, 30).ToString();
operand2.Text = rand.Next(0, 30).ToString();

// menghilangkan tombol start_btn
start_btn.Visibility = Visibility.Collapsed;

Selanjutnya kita akan membuat fungsi pada tombol Answer. Klik dua kali pada tombol Answer agar Visual Studio secara otomatis membuat fungsi(dalam konteks ini event handler) bernama answer_btn_Click pada MainPage.xaml.cs. Ketika user menekan tombol Answer, maka program akan mengecek nilai yang dimasukkan oleh user pada textbox apakah benar atau salah. Jika nilai yang dimasukkan user sesuai dengan penjumlahan dari operand1 dan operand2, maka jawaban tersebut benar dan akan muncul pesan bahwa jawaban tersebut benar, dan sebaliknya jika salah. Namun, angka pada textblock operand1 dan operand2 serta angka pada textbox user_ans masih dianggap sebuah text. Untuk itu, kita perlu mengkonversikan kembali text tersebut menjadi angka menggunakan int.Parse(). Untuk mengecek jawaban dari user, terlebih dahulu kita membuat suatu perkondisian apakah nilai yang dimasukkan user pada textbox sama dengan nilai hasil penjumlahan operand1 dan operand2. Jika jawaban benar, maka textblock message akan menampilkan "Jawaban anda benar", dan sebaliknya. Setelah user mengklik tombol Answer, tombol tersebut dan textbox user_ans dinonaktifkan terlebih dahulu lalu kita aktifkan tombol Generate Question. Tombol Answer dan textbox user_ans akan aktif kembali jika user mengklik tombol Generate Question(agar membuat soal baru).

Tambahkan kode berikut ini di dalam fungsi answer_btn_Click.

// cek apakah jawaban user sama dengan hasil penjumlahan operand1 dan operand2
if (int.Parse(operand1.Text) + int.Parse(operand2.Text) == int.Parse(user_ans.Text))
{
   message.Text = "Jawaban anda benar!";
}
else
{
   message.Text = "Jawaban anda salah!";
}

// nonaktifkan textbox user_ans dan tombol answer_btn
// aktifkan tombol generate_question
user_ans.IsEnabled = false;
generate_question.IsEnabled = true;
answer_btn.IsEnabled = false;

Selanjutnya, agar tombol Generate Question dapat membuat soal baru lagi ketika diklik, terlebih dahulu kita klik dua kali tombol tersebut agar Visual Studio secara otomatis membuat fungsi generate_question_Click. Pada saat user mengklik tombol tersebut, program akan membuat dua bilangan acak yang ditampilkan pada textblock operand1 dan operand2. Lalu tombol Generate Question dinonaktifkan, textbox user_ans dan tombol Answer diaktifkan kembali. Kemudian isi dari textbox user_ans dan text pada textblock message dikosongkan.

Tambahkan kode berikut ini di dalam fungsi generate_question_Click

// membuat dua bilangan acak lalu ditampilkan pada textblock operand1 dan operand2
// bilangan yang ditampilkan adalah acak dari 0 sampai 30
Random rand = new Random();
operand1.Text = rand.Next(0, 30).ToString();
operand2.Text = rand.Next(0, 30).ToString();

// aktifkan textbox user_ans dan tombol answer_btn
// nonaktifkan tombol generate_question
user_ans.IsEnabled = true;
generate_question.IsEnabled = false;
answer_btn.IsEnabled = true;

// kosongkan isi dari textbos user_ans dan text dari textblock message
user_ans.Text = "";
message.Text = "";