チュートリアル: タイマーを計算クイズの WinForms アプリに追加する

  • [アーティクル]

この 4 つのチュートリアル シリーズでは、計算クイズを作成します。 クイズには、クイズの回答者が指定した時間内に回答する 4 つのランダムな計算問題が含まれています。

クイズでは、タイマー コントロールを使用します。 このコントロールの背後にあるコードが、経過時間を追跡し、クイズの回答者の答えを確認します。

この 3 番目のチュートリアルでは、次の作業を行う方法について説明します。

  • タイマー コントロールを追加します。
  • タイマーのイベント ハンドラーを追加します。
  • ユーザーの答えを確認し、メッセージを表示し、正しい答えを入力するためのコードを記述します。

前提条件

このチュートリアルは、「数学クイズの WinForms アプリを作成する」から始まる、以前のチュートリアルに基づいています。 それらのチュートリアルをまだ完了していない場合は、最初に実行してください。

カウントダウン タイマーを追加する

クイズ中の時間を追跡するには、タイマー コンポーネントを使用します。 残り時間を格納する変数も必要です。

  1. 以前のチュートリアルで変数を宣言したときと同じ方法で、timeLeft という名前の整数変数を追加します。 timeLeft 宣言を他の宣言の直後に配置します。 コードは次の例のようになります。

    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;

重要

このページの右上にあるプログラミング言語のコントロールを使用して、C# コード スニペットまたは Visual Basic コード スニペットのいずれかを表示します。

Programming language control for Microsoft Learn

  1. Windows フォーム デザイナーで、ツールボックスの [コンポーネント] カテゴリから Timer コントロールをフォームに移動します。 このコントロールは、デザイン ウィンドウの下部にある灰色の領域に表示されます。

  2. フォーム上で、追加した [timer1] アイコンを選択し、 [Interval] プロパティを 1000 に設定します。 この間隔はミリ秒単位であるため、1000 の値を指定すると、タイマーは 1 秒ごとにTick イベントを発生させます。

答えを確認する

タイマーによって 1 秒ごとに Tick イベントが発生するため、Tick イベント ハンドラーの経過時間を確認するのが理にかなっています。 また、そのイベント ハンドラーで答えを確認するのも実用的です。 時間が経過した場合、または答えが正しい場合は、クイズを終了する必要があります。

このイベント ハンドラーを記述する前に、CheckTheAnswer() というメソッドを追加して、計算問題の答えが正しいかどうかを確認します。 このメソッドは、StartTheQuiz() など、他のメソッドと並べて配置する必要があります。 コードは次の例のようになります。

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

このメソッドは、計算問題に対する答えを決定し、結果を NumericUpDown コントロールの値と比較します。 このコードの場合:

  • Visual Basic のバージョンでは、このメソッドが値を返すため、通常の Sub キーワードではなく、Function キーワードが使用されます。

  • 乗算記号 (×) と除算記号 (÷) はキーボードから簡単に入力できないため、C# および Visual Basic では、乗算にはアスタリスク (*)、除算にはスラッシュ記号 (/) を使用します。

  • C# では、&& は logical and 演算子です。 Visual Basic でこれに相当する演算子は AndAlso です。 logical and 演算子を使用して、複数の条件が満たされているかどうかを確認します。 この場合、値がすべて正しければ、メソッドは true の値を返します。 それ以外の場合、メソッドは false の値を返します。

  • if ステートメントでは、NumericUpDown コントロールの [Value] プロパティを使用して、コントロールの現在の値にアクセスします。 次のセクションでは、同じプロパティを使用して、各コントロールに正しい答えを表示します。

タイマーにイベント ハンドラーを追加する

これで、答えを確認できるようになったので、Tick イベントハンドラーのコードを記述できます。 このコードは、タイマーによって Tick イベントが発生した後、毎秒実行されます。 このイベント ハンドラーは、CheckTheAnswer() を呼び出して、クイズの回答者の答えを確認します。 また、クイズの経過時間も確認します。

  1. フォーム上で、Timer コントロールをダブルクリックするか、これを選択して Enter キーを選択します。 これらのアクションによって、タイマーに Tick イベント ハンドラーが追加されます。 コード エディターが表示され、Tick ハンドラーのメソッドが表示されます。

  2. 次のステートメントを新しいイベント ハンドラー メソッドに追加します。

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

クイズでは 1 秒ごとにこのメソッドが実行されます。 このコードでは、最初に CheckTheAnswer() を返す値が確認されます。

  • すべての答えが正しい場合、その値は true であり、クイズは終了します。

    • タイマーが停止します。
    • 完了のメッセージが表示されます。
    • startButton コントロールの [Enabled] プロパティは、クイズの回答者が別のクイズを開始できるように true に設定されます。

  • CheckTheAnswer() が false を返す場合、コードは timeLeftの値を確認します。

    • この変数が 0 より大きい場合、タイマーは timeLeft から 1 を減算します。 また、残り秒数をクイズの回答者に示すために timeLabel コントロールの [Text] プロパティも更新されます。
    • 残り時間がなくなると、タイマーは停止し、timeLabel のテキストが Time's up! に変更されます。メッセージ ボックスには、クイズが終了し、答えが表示されることが通知されます。 スタート ボタンが再び使用できるようになります。

タイマーを開始する

クイズの開始時にタイマーを開始するには、次の例に示すように、StartTheQuiz() メソッドの最後に 3 つの行を追加します。

/// <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();
}

クイズの開始時に、このコードによって timeLeft 変数が 30 に、timeLabel コントロールの [Text] プロパティが 30 秒に設定されます。 次に、Timer コントロールの Start() メソッドがカウントダウンを開始します

アプリを実行する

  1. プログラムを保存し、実行します。

  2. [Start the quiz] を選択します。 タイマーはカウント ダウンを開始します。 残り時間がなくなると、クイズが終了し、答えが表示されます。

  3. 別のクイズを開始し、計算問題に正しい答えを入力します。 制限時間内に正しく応答すると、メッセージ ボックスが開き、スタート ボタンが使用可能になり、タイマーが停止します。

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

次のステップ

次のチュートリアルに進み、計算クイズのカスタマイズ方法を学習してください。

チュートリアル パート 4: 計算クイズの WinForms アプリをカスタマイズする