In this post, we are going to create a program that displays multiplication flash cards. The user will be presented with a problem, and given a place to input their answer. A correct answer will move to the next question, whereas a wrong answer will be flagged and the user will be given another chance to answer correctly. Here's what the final product is going to look like:
Let's start off with the user interface. Here's the full code to create the UI:
All of the attributes on the <Page> element are just the standard stuff that is there when you create a new project. Nothing fancy or exciting there.
The <StackPanel> within the <Page> is where the custom information for our form is placed. We saw the StackPanel from the last project, but as a quick reminder you can think of a StackPanel with a horizontal orientation like books on a bookshelf. Each item is set next to each other and they go from left to right.
So, the first item that we have on the bookshelf is a TextBlock. This TextBlock is name ProblemText and this is where we are going to display the problem to the user that they are trying to solve. In addition, we set the VerticalAlignment property to center. This centers the TextBlock so that it looks a little prettier. Finally we set the Margin property. This puts a buffer around the TextBlock so that other UI elements can't get too close to it. Again, this is a layout thing to make the UI look a little bit prettier to the user.
Next up is the TextBox. This is where the user is going to type in the answer to the problem that is displayed. Along with setting the Margin property (again to make it a little bit prettier), we also create an event handler for the KeyDown event. This means that whenever a user types into the TextBox, our function AnswerText_KeyDown will be called. We do this so that we can detect when the user presses Enter within our TextBox. We'll treat this the same as if they hit the Submit button. This just makes it a little bit easier for the user to use our application.
Finally, we have the Submit button. When the user clicks on this button, our function called Submit will be called. That's what the Click=”Submit” statement is all about. Additionally, we set the Content of the Button (what is displayed on the Button), to the word Submit as well. Lastly, we set the Margin property again to make it look a little nicer.
Here's the logic behind the program:
In the constructor for the MainPage, after we do a little bit of initialization, we generate a new problem. This will be the problem that is displayed when the window first appears to the user. Within the GenerateNewProblem method, we do just that – we create a new multiplication problem for the user to solve. We start by generating two random numbers between 1 and 10. If you read the documentation for Random.Next, it says that it “Returns a non-negative random integer that is less than the specified maximum.” So, that means that _random.Next(10) will return a value between 0 and 9. So, if we add one to it, we will get a random value between 1 and 10. Now all that is left is to generate the answer to the problem (multiply the numbers together), and to display the problem to the user. We display the problem to the user by setting the ProblemText.Text property to a string that contains the multiplication problem.
Next up is the logic to check the answer. The first step is converting the value in the AnswerText TextBox from a string into an integer. To do this, we are using the int.TryParse method. This will attempt to do the conversion. If it succeeds, the method will return true, and the output parameter (the variable called value) will be set to the parsed out value. If parsing fails, then the method will return false.
If the user provided an integer, then we'll check to see if the value that the user provided is correct. If it is, then we'll change the border back to the default (black). This is because we set the border to red if the user gets the question wrong, as you'll soon see. After this, we clear out the answer in anticipation of displaying the user a new question. Then we generate a new problem using the same logic as we did when the window first appeared.
If the user gets the question wrong, either by providing input that was not an integer or by providing the incorrect answer, we execute the last line of the CheckAnswer method. This turns the border of the AnswerText TextBox red, giving the user visual feedback that the answer that they provided was incorrect. Notice that within the if block for a correct answer that there is a return statement. This means that if the user gets the question correct, the return statement will exit from the method without executing any more logic within the method. In this case, that would mean that the last line, the one that turns the border red, will not be executed. So, the border will only turn red when the user answers the question incorrectly.
The Submit method is executed when the user presses the Submit button. All it does is call the CheckAnswer method and lets that method do all of the heavy lifting.
The final method is just to make the program a little bit easier to use. It is called every time a key is pressed within the AnswerText TextBox. This method just looks to see if the key that has been pressed is the enter key. If it is, then it calls the CheckAnswer method just like the Submit button does. There is one additional thing that we need to do though. We need to tell Windows that the event has been handled, and that it doesn't need to look for anyone else to deal with it. This is because Windows will go searching up and down the visual tree looking for someone who is capable of handling the event. So, since we want to do special logic when it happens, we need to declare ourselves as the one who is handling the given event. We only need to do this on enter, because that is the only event that we are handling. Everything else we let Windows handle in the normal fashion.
In this blog post, we created a small program that displayed flash cards to the user to help them with multiplication problem. This same idea could easily be extended for addition, subtraction, and division. We could also extend the program so that the user is displayed a picture of an animal and then they have to type the name of the animal (or select it from a list of animals). This could be helpful for small children who are trying to learn the names of animals, or even for adults who are trying to learn a second language.
The full source code for this tutorial is also on GitHub: