Étape 3 : ajouter un temporisateurStep 3: Add a countdown timer

Dans la troisième partie de ce didacticiel, vous allez ajouter un temporisateur pour suivre le nombre de secondes restantes avant la fin du temps imparti à la personne interrogée.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.

Note

Cette rubrique fait partie d'une série de didacticiels sur les concepts de codage de base.This topic is part of a tutorial series about basic coding concepts. Pour obtenir une vue d’ensemble du tutoriel, consultez Tutoriel 2 : créer un questionnaire mathématique chronométré.For an overview of the tutorial, see Tutorial 2: Create a timed math quiz.

Pour ajouter un temporisateurTo add a countdown timer

  1. Ajoutez une variable de type entier appelée timeLeft, comme vous l’avez fait dans la procédure précédente.Add an integer variable that's named timeLeft, just like you did in the previous procedure. Votre code doit ressembler à ce qui suit.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;
    

    À présent, vous avez besoin d'une méthode qui compte réellement les secondes, telles qu'une minuterie, et qui déclenche un événement après la durée que vous spécifiez.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. Dans la fenêtre de conception, déplacez un contrôle Timer de la catégorie Composants de la boîte à outils vers votre formulaire.In the design window, move a Timer control from the Components category of the Toolbox to your form.

    Le contrôle apparaît dans la zone grise en bas de la fenêtre de conception.The control appears in the gray area at the bottom of the design window.

  3. Dans le formulaire, sélectionnez l’icône timer1 que vous venez d’ajouter et affectez à sa propriété Interval la valeur 1000.On the form, choose the timer1 icon that you just added, and set its Interval property to 1000.

    La valeur d'intervalle étant exprimée en millisecondes, une valeur de 1000 entraîne le déclenchement de l'événement Tick à chaque seconde.Because the interval value is milliseconds, a value of 1000 causes the Tick event to fire every second.

  4. Dans le formulaire, double-cliquez sur le contrôle Timer ou choisissez-le, puis appuyez sur la touche Entrée.On the form, double-click the Timer control, or choose it and then choose the Enter key.

    L'éditeur de code apparaît et affiche la méthode du gestionnaire d'événements Tick que vous venez d'ajouter.The code editor appears and displays the method for the Tick event handler that you just added.

  5. Ajoutez les instructions suivantes à la nouvelle méthode de gestionnaire d'événements.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;
        }
    }
    

    Suite à ce que vous avez ajouté, la minuterie vérifie à chaque seconde si le temps est écoulé en déterminant si la variable de type entier timeLeft est supérieure à 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. Si tel est le cas, cela signifie qu'il reste du temps.If it is, time still remains. Tout d'abord, la minuterie soustrait 1 à timeLeft, puis met à jour la propriété Text du contrôle timeLabel pour indiquer à la personne qui répond au questionnaire le nombre de secondes restantes.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.

    Si le temps est écoulé, la minuterie s'arrête et modifie le texte du contrôle timeLabel pour qu'il affiche Time's up! (Temps écoulé)If no time remains, the timer stops and changes the text of the timeLabel control so that it shows Time's up! Un message annonce que le questionnaire est terminé et la réponse apparaît (ici, en ajoutant addend1 et addend2).A message box announces that the quiz is over, and the answer is revealed—in this case, by adding addend1 and addend2. La propriété Enabled du contrôle startButton a la valeur true afin que la personne interrogée puisse commencer un autre questionnaire.The Enabled property of the startButton control is set to true so that the quiz taker can start another quiz.

    Vous venez d'ajouter une instruction if else qui permet à vos programmes de prendre des décisions.You just added an if else statement, which is how you tell programs to make decisions. Une instruction if else se présente comme suit.An if else statement looks like the following.

    Note

    L’exemple suivant est uniquement fourni à titre d’illustration, ne l’ajoutez pas à votre projet.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.
    }
    

    Examinez attentivement l'instruction que vous avez ajoutée dans le bloc else pour afficher la réponse au problème d'addition.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;
    

    L'instruction addend1 + addend2 additionne les valeurs des deux variables.The statement addend1 + addend2 adds the values in the two variables together. La première partie (sum.Value) utilise la propriété Value du contrôle NumericUpDown de somme pour afficher la réponse correcte.The first part (sum.Value) uses the Value property of the sum NumericUpDown control to display the correct answer. Vous utiliserez la même propriété ultérieurement pour vérifier les réponses du questionnaire.You use the same property later to check the answers for the quiz.

    Les personnes interrogées peuvent entrer plus facilement des nombres à l’aide d’un contrôle NumericUpDown. C’est la raison pour laquelle vous en utilisez un pour les réponses aux problèmes mathématiques.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. Toutes les réponses possibles sont des nombres entiers compris entre 0 et 100.All of the potential answers are whole numbers from 0 through 100. En conservant les valeurs par défaut des propriétés Minimum, Maximum et DecimalPlaces, vous vous assurez que les personnes interrogées ne peuvent pas entrer de nombres décimaux, de nombres négatifs ou de nombres trop élevés.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. (Si vous vouliez permettre aux personnes répondant au questionnaire d’entrer 3,141 mais pas 3,1415, vous auriez dû affecter la valeur 3 à la propriété DecimalPlaces.)(If you wanted to allow quiz takers to enter 3.141 but not 3.1415, you could set the DecimalPlaces property to 3.)

  6. Ajoutez trois lignes à la fin de la méthode StartTheQuiz(), pour que votre code ressemble à celui ci-dessous.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();
    }
    

    À présent, lorsque votre questionnaire démarre, il affecte la valeur 30 à la variable timeLeft et la propriété Text du contrôle timeLabel est définie à 30 secondes.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. Il appelle ensuite la méthode Start() du contrôle Timer pour démarrer le compte à rebours.Then the Start() method of the Timer control starts the countdown. (Le questionnaire ne vérifie pas encore la réponse : cette action est effectuée plus tard.)(The quiz doesn't check the answer yet—that comes next.)

  7. Enregistrez votre programme, exécutez-le, puis choisissez le bouton Démarrer sur le formulaire.Save your program, run it, and then choose the Start button on the form.

    La minuterie commence le compte à rebours.The timer starts to count down. Lorsque le temps est écoulé, le questionnaire se termine et la réponse s'affiche.When time runs out, the quiz ends, and the answer appears. L'illustration suivante montre le questionnaire en cours.The following illustration shows the quiz in progress.

    Questionnaire mathématique en cours Questionnaire mathématique en coursMath quiz in progress Math quiz in progress

Pour continuer ou examinerTo continue or review