Tutorial: Hinzufügen eines Timers zu einer Windows Forms-App für ein Mathequiz

  • Artikel

In dieser Reihe von vier Tutorials erstellen Sie ein Mathequiz. Das Quiz enthält vier zufällige mathematische Probleme, die Quizteilnehmer*innen innerhalb einer angegebenen Zeit zu beantworten versuchen.

Das Quiz verwendet ein Timer-Steuerelement. Der Code hinter diesem Steuerelement verfolgt die verstrichene Zeit nach und überprüft die Antworten der Quizteilnehmer*innen.

In diesem dritten Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:

  • Hinzufügen eines Timer-Steuerelements
  • Hinzufügen eines Ereignishandlers für den Timer
  • Schreiben von Code zum Überprüfen der Antworten von Teilnerhmer*innen, Anzeigen von Nachrichten und Einfügen der richtigen Antworten

Voraussetzungen

Dieses Tutorial baut auf vorherigen Tutorials auf, beginnend mit dem Tutorial Erstellen einer WinForms-App für ein Mathequiz. Wenn Sie diese Tutorials noch nicht abgeschlossen haben, sollten Sie sie zuerst durcharbeiten.

Hinzufügen eines Countdowntimers

Sie verwenden eine Timerkomponente, um während des Quiz die Zeit im Blick zu behalten. Sie benötigen auch eine Variable, um die übrige Zeit zu speichern.

  1. Fügen Sie eine ganzzahlige Variable mit dem Namen timeLeft auf die gleiche Weise hinzu, wie Sie Variablen in vorherigen Tutorials deklariert haben. Platzieren Sie die timeLeft-Deklaration direkt nach den anderen Deklarationen. Ihr Code sollte wie im folgenden Beispiel aussehen.

    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;

    // These integer variables store the numbers 
    // for the subtraction problem. 
    int minuend;
    int subtrahend;

    // These integer variables store the numbers 
    // for the multiplication problem. 
    int multiplicand;
    int multiplier;

    // These integer variables store the numbers 
    // for the division problem. 
    int dividend;
    int divisor;

    // This integer variable keeps track of the 
    // remaining time.
    int timeLeft;

Wichtig

Verwenden Sie das Programmiersprachensteuerelement oben rechts auf dieser Seite, um entweder den C#-Codeausschnitt oder den Visual Basic-Codeausschnitt anzuzeigen.

Programming language control for Microsoft Learn

  1. Verschieben Sie im Windows Forms-Designer ein Timer-Steuerelement aus der Kategorie Komponenten der Toolbox in das Formular. Das Steuerelement wird im grauen Bereich unten im Entwurfsfenster angezeigt.

  2. Klicken Sie im Formular auf das soeben hinzugefügte timer1-Symbol, und legen Sie die Eigenschaft Intervall auf 1000 fest. Da dieses Intervall in Millisekunden angegeben wird, bewirkt der Wert „1000“, dass der Timer jede Sekunde ein Tick-Ereignis auslöst.

Überprüfen der Antworten

Da der Timer jede Sekunde ein Tick-Ereignis auslöst, ist es sinnvoll, die verstrichene Zeit in einem Tick-Ereignishandler zu überprüfen. Es ist auch praktisch, die Antworten in diesem Ereignishandler zu überprüfen. Wenn die Zeit abgelaufen ist oder die Antworten richtig sind, sollte das Quiz beendet werden.

Fügen Sie vor dem Schreiben dieses Ereignishandlers eine Methode namens CheckTheAnswer() hinzu, um zu bestimmen, ob die Antworten für die mathematischen Aufgaben richtig sind. Diese Methode sollte den anderen Methoden entsprechen (z. B. StartTheQuiz()). Ihr Code sollte wie im folgenden Beispiel aussehen.

/// <summary>
/// Check the answers to see if the user got everything right.
/// </summary>
/// <returns>True if the answer's correct, false otherwise.</returns>
private bool CheckTheAnswer()
{
    if ((addend1 + addend2 == sum.Value)
        && (minuend - subtrahend == difference.Value)
        && (multiplicand * multiplier == product.Value)
        && (dividend / divisor == quotient.Value))
        return true;
    else
        return false;
}

Diese Methode bestimmt die Antworten für die mathematischen Aufgaben und vergleicht die Ergebnisse mit den Werten in den NumericUpDown-Steuerelementen. In diesem Code:

  • Die Visual Basic-Version verwendet das Function-Schlüsselwort anstelle des üblichen Sub-Schlüsselworts, da diese Methode einen Wert zurückgibt.

  • Da es keine einfache Möglichkeit gibt, das Multiplikationszeichen (×) und das Divisionszeichen (÷) mit der Tastatur einzugeben, wird in C# und Visual Basic ein Sternchen (*) für Multiplikation und ein Schrägstrich (/) für Division akzeptiert.

  • In C# ist && der logical and-Operator. In Visual Basic ist AndAlso die Entsprechung dieses Operators. Sie verwenden den logical and-Operator, um zu überprüfen, ob mehrere Bedingungen erfüllt sind. Wenn alle Werte korrekt sind, gibt die Methode in diesem Fall den Wert true zurück. Anderenfalls gibt die Methode den Wert false zurück.

  • Die if-Anweisung verwendet die Value-Eigenschaft eines NumericUpDown-Steuerelements, um auf den aktuellen Wert des Steuerelements zuzugreifen. Im nächsten Abschnitt verwenden Sie dieselbe Eigenschaft, um die richtige Antwort in jedem Steuerelement anzuzeigen.

Hinzufügen eines Ereignishandlers zum Timer

Nachdem Sie nun die Möglichkeit haben, die Antworten zu überprüfen, können Sie den Code für den Tick-Ereignishandler schreiben. Dieser Code wird jede Sekunde ausgeführt, nachdem der Timer ein Tick-Ereignis auslöst. Dieser Ereignishandler überprüft die Antworten der Quizteilnehmer*innen, indem er CheckTheAnswer() aufruft. Außerdem wird überprüft, wie viel Zeit im Quiz verstrichen ist.

  1. Doppelklicken Sie im Formular auf das Timer-Steuerelement, oder wählen Sie es aus, und drücken Sie dann die EINGABETASTE. Diese Aktionen fügen dem Timer einen Tick-Ereignishandler hinzu. Der Code-Editor wird geöffnet und zeigt die Methode des Tick-Handlers an.

  2. Fügen Sie der neuen Ereignishandlermethode die folgenden Anweisungen hinzu.

    private void timer1_Tick(object sender, EventArgs e)
{
    if (CheckTheAnswer())
    {
        // If CheckTheAnswer() returns true, then the user 
        // got the answer right. Stop the timer  
        // and show a MessageBox.
        timer1.Stop();
        MessageBox.Show("You got all the answers right!",
                        "Congratulations!");
        startButton.Enabled = true;
    }
    else if (timeLeft > 0)
    {
        // If CheckTheAnswer() returns false, keep counting
        // down. Decrease the time left by one second and 
        // 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;
        difference.Value = minuend - subtrahend;
        product.Value = multiplicand * multiplier;
        quotient.Value = dividend / divisor;
        startButton.Enabled = true;
    }
}

Jede Sekunde des Quiz wird diese Methode ausgeführt. Der Code überprüft zuerst den Wert, den CheckTheAnswer() zurückgibt.

  • Wenn alle Antworten richtig sind, ist dieser Wert true, und das Quiz endet:

    • Der Timer wird beendet.
    • Eine Glückwunschnachricht wird angezeigt.
    • Die Enabled-Eigenschaft des startButton-Steuerelements ist auf true festgelegt, sodass Quizteilnehmer*innen ein anderes Quiz beginnen können.

  • Wenn CheckTheAnswer()false zurückgibt, überprüft der Code den Wert von timeLeft:

    • Wenn diese Variable größer als 0 ist, subtrahiert der Timer 1 von timeLeft. Außerdem wird die Text-Eigenschaft des timeLabel-Steuerelements aktualisiert, um Quizteilnehmer*innen anzuzeigen, wie viele Sekunden verbleiben.
    • Wenn keine Zeit verbleibt, wird der Timer beendet und ändert den TimeLabel-Text in Time's up! Ein Meldungsfeld gibt an, dass das Quiz übergibt, und die Antworten werden offengelegt. Die Startschaltfläche ist wieder verfügbar.

Starten des Zeitgebers

Um den Timer beim Start des Quiz zu starten, fügen Sie am Ende der StartTheQuiz()-Methode wie im folgenden Beispiel drei Zeilen hinzu.

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

    // Fill in the subtraction problem.
    minuend = randomizer.Next(1, 101);
    subtrahend = randomizer.Next(1, minuend);
    minusLeftLabel.Text = minuend.ToString();
    minusRightLabel.Text = subtrahend.ToString();
    difference.Value = 0;

    // Fill in the multiplication problem.
    multiplicand = randomizer.Next(2, 11);
    multiplier = randomizer.Next(2, 11);
    timesLeftLabel.Text = multiplicand.ToString();
    timesRightLabel.Text = multiplier.ToString();
    product.Value = 0;

    // Fill in the division problem.
    divisor = randomizer.Next(2, 11);
    int temporaryQuotient = randomizer.Next(2, 11);
    dividend = divisor * temporaryQuotient;
    dividedLeftLabel.Text = dividend.ToString();
    dividedRightLabel.Text = divisor.ToString();
    quotient.Value = 0;

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

Wenn das Quiz gestartet wird, legt dieser Code die timeLeft-Variable auf 30 und die Text-Eigenschaft des timeLabel-Steuerelements auf 30 Sekunden fest. Dann wird der Countdown mit der Start()-Methode des Timer-Steuerelements gestartet.

Ausführen der App

  1. Speichern Sie das Programm, und führen Sie es aus.

  2. Klicken Sie auf Start the quiz (Quiz starten). Der Timer beginnt den Countdown. Wenn die Zeit abgelaufen ist, endet das Quiz, und die Antworten werden angezeigt.

  3. Starten Sie ein weiteres Quiz, und geben Sie die richtigen Antworten für die mathematischen Aufgaben an. Wenn Sie innerhalb des Zeitlimits richtig antworten, wird ein Meldungsfeld geöffnet, die Startschaltfläche wird verfügbar, und der Timer wird beendet.

    Screenshot that shows a completed quiz with 19 seconds remaining. The Start the quiz button is available.

Nächste Schritte

Im nächsten Tutorial erfahren Sie, wie Sie Ihr Mathequiz anpassen.

Tutorial Teil 4: Anpassen einer WinForms-App für ein Mathequiz