Programming Simple Math Quiz Application with C# and Visual Studio

In this article, i will explain how to program Simple Math Quiz application. I used Visual Studio 2015 with C# and XAML programming language to make this program.

This app will show simple mathematical problem that must be solved by user, and then the user can generate another mathematical problem.

Steps:

First, click on New Project -> Visual C# -> Universal -> Blank App

There are several things we must pay attention to when we choose Blank App Template. Look at Solution Explorer, there is a file named MainPage.xaml and when we expand it, it will show another file named MainPage.xaml.cs(Choose Window -> Reset Window Layout, if Solution Explorer is not visible on Visual Studio interface).

MainPage.xaml is a file used to design the app's interface, and MainPage.xaml.cs is used to make functional and logical component of the app.

Double-click on MainPage.xaml to open the file, Visual Studio will divide it's main interface into three sections. The first section is called designer where we can look at the user interface of our app. The second section is XAML, the actual component that build the user interface. The third is Toolbox, this section provides common XAML component control that can be used into the app.

On the toolbox, click on Common XAML Controls, then choose a Button and drag it into designer. The button we dragged earlier will be showed in the designer. When we clicked on that button, look at Properties panel on the right-down corner(Choose Window -> Reset Window Layout, if Properties panel is not visible). There is name textbox used to name our  button, and content textbox to set the text that will show on the button.

Change the name on that button to answer_btn and the content to Answer.

Again on the toolbox, drag four Textblocks and one Textbox into designer and arrange it so that it looks like on this image below.

Change the name to operand1 for the left-most textblock and its text to ?, then change the name of the Textblock next to it to operator and its text to +, again change the name of the Textblock next to it to operand2 and its text to ?, then change the name of the fourth Textblock to equal and its text to =, give the name of the Textbox on the right-most to user_ans without text.

Add another two buttons and one textblock into designer. The first we name it generate_question with text Generate Question then put it on the top. The another we name it start_btn with text Start and put it below Answer button. Next, give the name of the textblock to message without text.

The next step we will build the Event Handler of the component we arranged earlier on the designer. On the Solution Explorer, open the MainPage.xaml.cs. Look at the constructor located at line 25 to 28.

The constructor will be executed when we open the MainPage file at the runtime(Visual Studio will set MainPage file to be the first page  when we created a new project). So, there are several things we focused on when the app is running. First, the user must not click the Answer button, Generate Question button, and insert the answer into the Textbox. User can only click the Start Quiz button. To make that not happen, we can disable that three controls. In C#(especially .NET Framework), we can set the IsEnabled property on that control to be false so that the control is disabled.

Add this code below the this.InitializeComponent();

// disabling user_ans, generate_question, and answer_btn control
user_ans.IsEnabled = false;
generate_question.IsEnabled = false;
answer_btn.IsEnabled = false;

Press Ctrl+F5 or click Local Machine to run the application and look at the result of our app.

The three controls cannot be used because our code that make the controls disabled is executed the second after the app is started running.

The next step is we build the Event Handler for Start button. Firstly, close the app we run earlier. Double click on Start button so that Visual Studio automatically generate method named start_btn_Click(button_name_Click) on MainPage.xaml.cs. This method will be executed when we click the Start button, the Answer button and the textbox we disabled before will be enabled, make a random mathematical problem, and hide the Start button.

To enable the Answer button and the textbox, we set the IsEnabled property to true. Then, we set Visibility property on the Start button to Visibility.Collapsed so that the Start button will be invisible. Next, we will generate two random numbers and display it to operand1 and operand2 textblock. To generate random number, first we instantiate an object with class Random. We can access the Next() method on that Random object that has two arguments. The first argument is the minimum number that will be generated, and the second is the maximum number. So, if we set Next(0, 30), then it will generate a random number between 0 and 30 inclusively. When the random number has been generated, the number must be converted to string with ToString() so that it can be assigned to Text property on operand1 and operand2.

Add this code in the start_btn_Click method

// enabling user_ans and answer_btn
user_ans.IsEnabled = true;
answer_btn.IsEnabled = true;

// generate two random numbers and display it on operand1 and operand2 textblock
// the number will be displayed is a number ranged between 0 and 30 inclusively
Random rand = new Random();
operand1.Text = rand.Next(0, 30).ToString();
operand2.Text = rand.Next(0, 30).ToString();

// hide the start button
start_btn.Visibility = Visibility.Collapsed;

Next, we will make Event Handler for the Answer button. Double click on the Answer button so that Visual Studio automatically generate a method called answer_btn_Click on MainPage.xaml.cs. When the user click the Answer button, the program will check if the number the user has been input is equal to the result of operand1 plus operand2. If true, then the program will display "Your answer is correct!", and false otherwise. However, the number on the operand1 and operand2 still be considered as Text. So, we must convert it back to integer with int.Parse(). After the user answered the question, we must disable the Answer button and the textbox, and enable the Generate Question button. The Answer button and the textbox will be enabled again when the user click the Generate Question button. 

Add this code in the answer_btn_Click method

// check if the user's answer is equal to the result of operand1 and operand2
if (int.Parse(operand1.Text) + int.Parse(operand2.Text) == int.Parse(user_ans.Text))
{
   message.Text = "Your answer is correct!";
}
else
{
   message.Text = "Your answer is incorrect!";
}

// disabling the textbox and answer button
// enabling the generate question button
user_ans.IsEnabled = false;
generate_question.IsEnabled = true;
answer_btn.IsEnabled = false;

Then, we will make a Event Handler for Generate Question button. Double click on that button to generate its method. When the user click that button, the program will generate two random numbers that will be displayed on the operand1 and operand2. Next, we disable the Generate Question, and enable the Answer button. Finally, set the content of the textbox and the message to an empty string.

Add this code in generate_question_Click method

// generate two random numbers and display it on operand1 and operand2 textblock
// the number will be displayed is a number ranged between 0 and 30 inclusively
Random rand = new Random();
operand1.Text = rand.Next(0, 30).ToString();
operand2.Text = rand.Next(0, 30).ToString();

// enabling the textbox and answer button
// disabling the generate question button
user_ans.IsEnabled = true;
generate_question.IsEnabled = false;
answer_btn.IsEnabled = true;

// set the text of the textbox and the message to an empty string
user_ans.Text = "";
message.Text = "";

Read more

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 = "";

Read more