Step 3: Add a Countdown Timer

  • Article

Because this is a timed quiz, you will add a countdown timer. Your program needs to track the number of seconds left as the game progresses.

To add a countdown timer

  1. Add an int (Integer) called timeLeft, just like you did previously. Your code should look like the following.

    Public Class Form1

    ' Create a Random object to generate random numbers. 
    Private randomizer As New Random

    ' These Integers will store the numbers 
    ' for the addition problem. 
    Private addend1 As Integer 
    Private addend2 As Integer 

    ' This Integer will keep track of the time left. 
    Private timeLeft As Integer

    public partial class Form1 : Form
{
    // Create a Random object to generate random numbers.
    Random randomizer = new Random();

    // These ints will store the numbers 
    // for the addition problem. 
    int addend1;
    int addend2;

    // This int will keep track of the time left. 
    int timeLeft;

  2. Now you need something that actually does the counting, such as a timer. Go to Windows Forms Designer and drag a Timer control from the Toolbox (from the Components category) to your form. It will appear in the gray area at the bottom of Windows Forms Designer.

  3. Click the timer1 icon you just added, and set the Interval property to 1000. This causes the Tick event to fire every second. Then double-click the icon to add the Tick event handler. The IDE switches to the code editor and jumps to the new event handler method. Add the following statements.

    Private Sub Timer1_Tick() Handles Timer1.Tick

    If timeLeft > 0 Then 
        ' Display the new time left 
        ' by updating the Time Left label.
        timeLeft -= 1
        timeLabel.Text = timeLeft & " seconds" 
    Else 
        ' If the user ran out of time, stop the timer, show 
        ' a MessageBox, and fill in the answers.
        Timer1.Stop()
        timeLabel.Text = "Time's up!"
        MessageBox.Show("You didn't finish in time.", "Sorry")
        sum.Value = addend1 + addend2
        startButton.Enabled = True 
    End If 

End Sub

    private void timer1_Tick(object sender, EventArgs e)
{
    if (timeLeft > 0)
    {
        // Display the new time left 
        // by updating the Time Left label.
        timeLeft = timeLeft - 1;
        timeLabel.Text = timeLeft + " seconds";
    }
    else
    {
        // If the user ran out of time, stop the timer, show 
        // a MessageBox, and fill in the answers.
        timer1.Stop();
        timeLabel.Text = "Time's up!";
        MessageBox.Show("You didn't finish in time.", "Sorry");
        sum.Value = addend1 + addend2;
        startButton.Enabled = true;
    }
}

    Based on what you added, each second the timer checks whether time has run out by checking whether the timeLeft int (Integer) is greater than 0. If it is, there's time left. First the timer subtracts 1 from timeLeft, and then it updates the timeLabel control Text property to show the user how many seconds are left.

    If there's no time left, the timer stops and changes the timeLabel control text so it shows Time's up! A message box appears telling the user that the quiz is over. The answer is revealed—in this case, by adding addend1 and addend2. The startButton control Enabled property is set to true, to make the button available again. That way, the user can start the quiz again.

    You just added an if else statement, which is how you tell programs to make decisions. An if else statement looks like the following.

    If (something your program will check) Then
    ' statements that will get executed
    ' if the thing that the program checked is true 
Else
    ' statements that will get executed
    ' if the thing that the program checked is NOT true
End If

    if (something your program will check)
{
    // statements that will get executed
    // if the thing that the program checked is true 
}
else
{
    // statements that will get executed
    // if the thing that the program checked is NOT true
}

    Take a closer look at the statement you added in the else block to show the answer to the addition problem.

    sum.Value = addend1 + addend2

    sum.Value = addend1 + addend2;

    As you probably know, addend1 + addend2 adds the two values together. The first part (sum.Value) uses the Value property of the NumericUpDown control to display the correct answer. The Value property is also used later, when you want to check the answers for the quiz.

    A NumericUpDown control makes it easy for users to enter numbers, which is why you use the control for the answers to the math problems. Because all of the answers are numbers from 0 through 100, you leave the default Minimum and Maximum properties set to 0 and 100. This causes the control to only allow a user to enter a number from 0 through 100. Because the answers can only be whole numbers, you leave the DecimalPlaces property set to 0, which means that the user can't enter decimals. (If you wanted to allow the user to enter 3.141 but not 3.1415, you could set the DecimalPlaces property to 3.)

  4. Add three lines to the end of the StartTheQuiz() method, so the code looks like the following.

    ''' <summary> 
''' Start the quiz by filling in all of the problems 
''' and starting the timer. 
''' </summary> 
''' <remarks></remarks> 
Public Sub StartTheQuiz()

    ' Fill in the addition problem.
    addend1 = randomizer.Next(51)
    addend2 = randomizer.Next(51)
    plusLeftLabel.Text = addend1.ToString()
    plusRightLabel.Text = addend2.ToString()
    sum.Value = 0

    ' Start the timer.
    timeLeft = 30
    timeLabel.Text = "30 seconds"
    Timer1.Start()

End Sub

    /// <summary> 
/// Start the quiz by filling in all of the problems 
/// and starting the timer. 
/// </summary> 
public void StartTheQuiz()
{
    // Fill in the addition problem.
    addend1 = randomizer.Next(51);
    addend2 = randomizer.Next(51);
    plusLeftLabel.Text = addend1.ToString();
    plusRightLabel.Text = addend2.ToString();
    sum.Value = 0;

    // Start the timer.
    timeLeft = 30;
    timeLabel.Text = "30 seconds"; 
    timer1.Start();
}

    Now, when your quiz starts, it sets the timeLeft int (Integer) to 30, and changes the timeLabel control Text property to 30 seconds. Then it calls the Timer control's Start() method to start the countdown. (It doesn't check the answer yet—that's coming next.)

  5. Save and run your program. When you click the Start button, the timer should start counting down. When time runs out, the quiz ends, and the answer appears. The following picture shows the quiz in progress.

    Math quiz in progress

    Math quiz in progress

To continue or review