3단계: 카운트다운 타이머 추가Step 3: Add a Countdown Timer

이 자습서의 3단계에서는 퀴즈를 푸는 사람이 퀴즈를 마칠 때까지 남은 시간(초)을 추적하도록 카운트다운 타이머를 추가합니다.In the third part of this tutorial, you'll add a countdown timer to track the number of seconds that remain for the quiz taker to finish.

참고

이 항목은 기본 코딩 개념에 대해 설명하는 자습서 시리즈의 일부입니다.This topic is part of a tutorial series about basic coding concepts. 자습서에 대한 개요는 자습서 2: 시간이 지정된 수학 퀴즈 만들기를 참조하세요.For an overview of the tutorial, see Tutorial 2: Create a Timed Math Quiz.

카운트다운 타이머를 추가하려면To add a countdown timer

  1. 이전 절차에서와 같이 timeLeft라는 정수 변수를 추가합니다.Add an integer variable that's named timeLeft, just like you did in the previous procedure. 이 코드는 다음과 같습니다.Your code should look like the following.

    Public Class Form1
    
        ' Create a Random object called randomizer 
        ' to generate random numbers.
        Private randomizer As New Random
    
        ' These integer variables store the numbers 
        ' for the addition problem. 
        Private addend1 As Integer
        Private addend2 As Integer
    
        ' This integer variable keeps track of the 
        ' remaining time.
        Private timeLeft As Integer
    
    public partial class Form1 : Form
    {
        // Create a Random object called randomizer 
        // to generate random numbers.
        Random randomizer = new Random();
    
        // These integer variables store the numbers 
        // for the addition problem. 
        int addend1;
        int addend2;
    
        // This integer variable keeps track of the 
        // remaining time.
        int timeLeft;
    

    이제 타이머와 같이 실제로 초를 세는 메서드가 있어야 합니다. 이 메서드는 지정된 시간이 지나면 이벤트를 발생시킵니다.Now you need a method that actually counts the seconds, such as a timer, which raises an event after the amount of time that you specify.

  2. 디자인 창에서 도구 상자의 구성 요소 범주에 있는 Timer 컨트롤을 폼으로 이동합니다.In the design window, move a Timer control from the Components category of the Toolbox to your form.

    그러면 디자인 창의 맨 아래에 있는 회색 영역에 이 컨트롤이 표시됩니다.The control appears in the gray area at the bottom of the design window.

  3. 폼에서 방금 추가한 timer1 아이콘을 선택하고 Interval 속성을 1000으로 설정합니다.On the form, choose the timer1 icon that you just added, and set its Interval property to 1000.

    간격 값은 밀리초 단위이므로 값으로 1000을 지정하면 Tick 이벤트가 1초 간격으로 발생합니다.Because the interval value is milliseconds, a value of 1000 causes the Tick event to fire every second.

  4. 폼에서 Timer 컨트롤을 두 번 클릭하거나, 이 컨트롤을 선택한 다음 Enter 키를 선택합니다.On the form, double-click the Timer control, or choose it and then choose the Enter key.

    코드 편집기가 나타나고 방금 추가한 Tick 이벤트 처리기에 대한 메서드가 표시됩니다.The code editor appears and displays the method for the Tick event handler that you just added.

  5. 새 이벤트 처리기 메서드에 다음 문을 추가합니다.Add the following statements to the new event handler method.

    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;
        }
    }
    

    추가한 문을 기반으로 타이머는 1초 간격으로 timeLeft 정수 변수가 0보다 큰지 확인하여 시간이 다 되었는지 여부를 확인합니다.Based on what you added, the timer checks each second whether time has run out by determining whether the timeLeft integer variable is greater than 0. 이 값이 0보다 크면 시간이 남은 것입니다.If it is, time still remains. 타이머는 먼저 timeLeft에서 1을 뺀 다음 퀴즈를 푸는 사람에게 남은 시간(초)을 표시하도록 timeLabel 컨트롤의 Text 속성을 업데이트합니다.The timer first subtracts 1 from timeLeft and then updates the Text property of the timeLabel control to show the quiz taker how many seconds remain.

    남은 시간이 없으면 타이머가 중지되고 timeLabel 컨트롤의 텍스트가 Time's up!으로 변경되어 표시됩니다.If no time remains, the timer stops and changes the text of the timeLabel control so that it shows Time's up! 퀴즈가 끝났다는 메시지 상자가 나타나고 답(이 경우, addend1과 addend2를 더한 값)이 표시됩니다.A message box announces that the quiz is over, and the answer is revealed—in this case, by adding addend1 and addend2. 퀴즈를 푸는 사람이 다른 퀴즈를 시작할 수 있도록 startButton 컨트롤의 Enabled 속성이 true로 설정됩니다.The Enabled property of the startButton control is set to true so that the quiz taker can start another quiz.

    이제 프로그램에서 결정을 내리도록 지시하는 방법인 if else 문을 추가했습니다.You just added an if else statement, which is how you tell programs to make decisions. if else 문은 다음과 같습니다.An if else statement looks like the following.

    참고

    다음 예제는 이해를 돕기 위한 것일 뿐입니다. 프로젝트에 추가하지 마세요.The following example is for illustration only-don't add it to your project.

    If (something that your program will check) Then  
        ' One or more statements that will run  
        ' if what the program checked is true.   
    Else  
        ' One or more statements that will run  
        ' if what the program checked is false.  
    End If  
    
    if (something that your program will check)  
    {  
        // One or more statements that will run  
        // if what the program checked is true.   
    }  
    else  
    {  
        // One or more statements that will run  
        // if what the program checked is false.  
    }  
    

    더하기 문제의 답을 표시하기 위해 else 블록에 추가한 문을 자세히 살펴봅니다.Look closely at the statement that you added in the else block to show the answer to the addition problem.

    sum.Value = addend1 + addend2
    
    sum.Value = addend1 + addend2;
    

    addend1 + addend2 문은 두 변수의 값을 서로 더합니다.The statement addend1 + addend2 adds the values in the two variables together. 첫 번째 부분(sum.Value)은 sum NumericUpDown 컨트롤의 Value 속성을 사용하여 올바른 답을 표시합니다.The first part (sum.Value) uses the Value property of the sum NumericUpDown control to display the correct answer. 이 속성은 나중에 퀴즈의 답을 확인할 때도 사용됩니다.You use the same property later to check the answers for the quiz.

    퀴즈를 푸는 사람은 NumericUpDown 컨트롤을 사용하여 숫자를 더 쉽게 입력할 수 있습니다. 수학 문제의 답을 입력하는 데 이 컨트롤이 사용되는 이유입니다.Quiz takers can enter numbers more easily by using a NumericUpDown control, which is why you use one for the answers to the math problems. 가능한 모든 답은 0에서 100 사이의 정수이므로All of the potential answers are whole numbers from 0 through 100. Minimum, MaximumDecimalPlaces 속성의 값을 기본값으로 유지하면 퀴즈를 푸는 사람이 소수, 음수 또는 100을 초과하는 숫자를 입력할 수 없습니다.By leaving the default values of the Minimum, Maximum, and DecimalPlaces properties, you ensure that quiz takers can't enter decimals, negative numbers, or numbers that are too high. 퀴즈를 푸는 사람이 3.141은 입력할 수 있고 3.1415는 입력할 수 없도록 하려면 DecimalPlaces 속성을 3으로 설정하면 됩니다.(If you wanted to allow quiz takers to enter 3.141 but not 3.1415, you could set the DecimalPlaces property to 3.)

  6. 다음과 같이 StartTheQuiz() 메서드에 세 개의 줄을 추가합니다.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 problem 
    ''' values and starting the timer. 
    ''' </summary>
    ''' <remarks></remarks>
    Public Sub StartTheQuiz()
    
        ' Fill in the addition problem.
        ' Generate two random numbers to add.
        ' Store the values in the variables 'addend1' and 'addend2'.
        addend1 = randomizer.Next(51)
        addend2 = randomizer.Next(51)
    
        ' Convert the two randomly generated numbers
        ' into strings so that they can be displayed
        ' in the label controls.
        plusLeftLabel.Text = addend1.ToString()
        plusRightLabel.Text = addend2.ToString()
    
        ' 'sum' is the name of the NumericUpDown control.
        ' This step makes sure its value is zero before
        ' adding any values to it.
        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 problem 
    /// values and starting the timer. 
    /// </summary>
    public void StartTheQuiz()
    {
        // Fill in the addition problem.
        // Generate two random numbers to add.
        // Store the values in the variables 'addend1' and 'addend2'.
        addend1 = randomizer.Next(51);
        addend2 = randomizer.Next(51);
    
        // Convert the two randomly generated numbers
        // into strings so that they can be displayed
        // in the label controls.
        plusLeftLabel.Text = addend1.ToString();
        plusRightLabel.Text = addend2.ToString();
    
    
        // 'sum' is the name of the NumericUpDown control.
        // This step makes sure its value is zero before
        // adding any values to it.
        sum.Value = 0;
    
        // Start the timer.
        timeLeft = 30;
        timeLabel.Text = "30 seconds"; 
        timer1.Start();
    }
    

    이제 퀴즈를 시작하면 timeLeft 변수가 30으로 설정되고 timeLabel 컨트롤의 Text 속성이 30초로 설정됩니다.Now, when your quiz starts, the timeLeft variable is set to 30 and the Text property of the timeLabel control is set to 30 seconds. 그런 다음 Timer 컨트롤의 Start() 메서드가 카운트다운을 시작합니다.Then the Start() method of the Timer control starts the countdown. 이때 답을 확인하지는 않습니다. 답 확인은 나중에 수행됩니다.(The quiz doesn't check the answer yet—that comes next.)

  7. 프로그램을 저장하고 실행한 후 폼에서 시작 단추를 선택합니다.Save your program, run it, and then choose the Start button on the form.

    타이머가 카운트다운을 시작합니다.The timer starts to count down. 시간이 다 되면 퀴즈가 종료되고 답이 표시됩니다.When time runs out, the quiz ends, and the answer appears. 다음 그림에서는 진행 중인 퀴즈를 보여 줍니다.The following illustration shows the quiz in progress.

    진행 중인 수학 퀴즈Math quiz in progress
    진행 중인 수학 퀴즈Math quiz in progress

계속하거나 검토하려면To continue or review