Tutorial: Customize a math quiz WinForms app

In this series of four tutorials, you'll build a math quiz. The quiz contains four random math problems that a quiz taker tries to answer within a specified time.

This tutorial shows you how to enhance your quiz by clearing default values and by customizing the appearance of controls.

In this final tutorial, you learn how to:

• Add event handlers to clear the default NumericUpDown control values.
• Customize the quiz.

Prerequisites

This tutorial builds on previous tutorials, starting with Create a math quiz WinForms app. If you haven't completed those tutorials, go through them first.

Add event handlers for the NumericUpDown controls

The quiz contains NumericUpDown controls that quiz takers use to enter numbers. When you enter an answer, you either need to select the default value first or delete that value manually. By adding an Enter event handler, you can make it easier to enter answers. This code selects and clears the current value in each NumericUpDown control as soon as the quiz taker selects it and starts to enter a different value.

1. Select the first NumericUpDown control on the form. In the Properties dialog box, select the Events icon on the toolbar.

   

   The Events tab in Properties displays all the events that you can respond to for the item that you selected on the form. In this case, all the listed events pertain to the NumericUpDown control.

2. Select the Enter event, enter answer_Enter, and then select Enter.

   

   The code editor appears and displays the Enter event handler that you created for the sum NumericUpDown control.

3. In the method for the answer_Enter event handler, add the following code:

   C#

   private void answer_Enter(object sender, EventArgs e)
   {
       // Select the whole answer in the NumericUpDown control.
       NumericUpDown answerBox = sender as NumericUpDown;
   
       if (answerBox != null)
       {
           int lengthOfAnswer = answerBox.Value.ToString().Length;
           answerBox.Select(0, lengthOfAnswer);
       }
   }
   

   VB

   ''' <summary> 
   ''' Modify the behavior of the NumericUpDown control
   ''' to make it easier to enter numeric values for
   ''' the quiz.
   ''' </summary> 
   Private Sub answer_Enter(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles sum.Enter
   
       ' Select the whole answer in the NumericUpDown control.
       Dim answerBox = TryCast(sender, NumericUpDown)
   
       If answerBox IsNot Nothing Then
           Dim lengthOfAnswer = answerBox.Value.ToString().Length
           answerBox.Select(0, lengthOfAnswer)
       End If
   
   End Sub
   

---

In this code:

• The first line declares the method. It includes a parameter that's named sender. In C#, the parameter is object sender. In Visual Basic, it's sender As System.Object. This parameter refers to the object whose event is firing, which is known as the sender. In this case, the sender object is the NumericUpDown control.
• The first line inside the method casts, or converts, the sender from a generic object to a NumericUpDown control. That line also assigns the name answerBox to the NumericUpDown control. All the NumericUpDown controls on the form will use this method, not just the addition problem's control.
• The next line verifies whether answerBox was successfully cast as a NumericUpDown control.
• The first line inside the if statement determines the length of the answer that's currently in the NumericUpDown control.
• The second line inside the if statement uses the answer length to select the current value in the control.

When the quiz taker selects the control, Visual Studio fires this event. This code selects the current answer. As soon as the quiz taker starts to enter a different answer, the current answer is cleared and replaced with the new answer.

1. In Windows Forms Designer, select the addition problem's NumericUpDown control again.

2. In the Events page of the Properties dialog box, find the Click event, and then select answer_Enter from the drop-down menu. This event handler is the one that you just added.

3. In Windows Forms Designer, select the subtraction problem's NumericUpDown control.

4. In the Events page of the Properties dialog box, find the Enter event, and then select answer_Enter from the drop-down menu. This event handler is the one that you just added. Repeat this step for the Click event.

5. Repeat the previous two steps for the multiplication and division NumericUpDown controls.

Run your app

1. Save your program and run it.

2. Start a quiz, and select a NumericUpDown control. The existing value is automatically selected and then cleared when you start to enter a different value.

   

Customize your quiz

In this last part of the tutorial, you'll explore some ways to customize the quiz and expand on what you've learned.

Change the color of a label

• Use the BackColor property of the timeLabel control to turn this label red when only five seconds remain in a quiz.

  C#

  timeLabel.BackColor = Color.Red;
  

  VB

  timeLabel.BackColor = Color.Red
  

• Reset the color when the quiz is over.

Play a sound for a correct answer

Give the quiz taker a hint by playing a sound when the correct answer is entered into a NumericUpDown control. To implement this functionality, write an event handler for each control's ValueChanged event. This type of event fires whenever a quiz taker changes the control's value.

Next steps

Congratulations! You've finished this series of tutorials. You've completed these programming and design tasks in the Visual Studio IDE:

• Created a Visual Studio project that uses Windows Forms
• Added labels, a button, and NumericUpDown controls
• Added a timer
• Set up event handlers for your controls
• Written C# or Visual Basic code to handle the events

Continue learning with another tutorial series on how to build a matching game.

Tutorial 3: Create a matching game