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