Tutorial: Incorporación de un temporizador a una aplicación de WinForms de prueba matemática

  • Artículo

En esta serie de cuatro tutoriales, creará una prueba matemática. El cuestionario contiene cuatro problemas matemáticos aleatorios que el usuario intentará responder en un tiempo especificado.

La prueba usa un control Timer. El código subyacente a este control realiza un seguimiento del tiempo transcurrido y comprueba las respuestas del usuario.

En este tercer tutorial, obtendrá información sobre cómo hacer lo siguiente:

  • Agregue un control Timer.
  • Agregue un controlador de eventos para el temporizador.
  • Escriba código para comprobar las respuestas del usuario, mostrar mensajes y rellenar las respuestas correctas.

Prerequisites

Este tutorial se basa en tutoriales anteriores, empezando por Crear una prueba matemática de la aplicación WinForms. Si no ha completado esos tutoriales, revíselos primero.

Agregar un temporizador de cuenta atrás

Para realizar un seguimiento del tiempo durante la prueba, use un componente de temporizador. También necesita una variable para almacenar la cantidad de tiempo restante.

  1. Agregue una variable de entero denominada timeLeft de la misma manera que declaró las variables en tutoriales anteriores. Coloque la declaración timeLeft justo después de las demás declaraciones. El código debe tener un aspecto similar al del siguiente ejemplo.

    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;

Importante

Use el control del lenguaje de programación situado en la parte superior derecha de esta página para ver el fragmento de código de C# o el de Visual Basic.

Programming language control for Microsoft Learn

  1. En Diseñador de Windows Forms, mueva un control Timer de la categoría Componentes del cuadro de herramientas al formulario. El control aparece en el área gris de la parte inferior de la ventana de diseño.

  2. En el formulario, seleccione el icono timer1 que acaba de agregar y establezca su propiedad Interval en 1000. Dado que este intervalo está en milisegundos, un valor de 1000 hace que el temporizador genera Tick un evento cada segundo.

Comprobación de las respuestas

Dado que el temporizador genera un evento Tick cada segundo, tiene sentido comprobar el tiempo transcurrido en un controlador de eventos Tick. También es práctico comprobar las respuestas en ese controlador de eventos. Si se ha acabado el tiempo o si las respuestas son correctas, la prueba debe finalizar.

Antes de escribir ese controlador de eventos, agregue un método llamado CheckTheAnswer() para determinar si las respuestas a los problemas matemáticos son correctas. Este método debe estar en línea con el resto de métodos, como StartTheQuiz(). El código debe tener un aspecto similar al del siguiente ejemplo.

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

Este método determina las respuestas a los problemas matemáticos y compara los resultados con los valores de los controles NumericUpDown. En este código:

  • La versión de Visual Basic utilizala palabra clave Function en lugar de la palabra clave habitual Sub, ya que este método devuelve un valor.

  • Dado que no resulta fácil escribir el signo de multiplicación (×) y el signo de división (÷) mediante el teclado, C# y Visual Basic aceptan el asterisco (*) para la multiplicación y la barra diagonal (/) para la división.

  • En C#, && es el operador logical and. En Visual Basic, el operador equivalente es AndAlso. Use el operador logical and para comprobar si se cumple más de una condición. En este caso, si todos los valores son correctos, el método devuelve un valor de true. De lo contrario, el método devuelve el valor false.

  • La instrucción if usa la propiedad Value de un control NumericUpDown para acceder al valor actual del control. En la siguiente sección, usará la misma propiedad para mostrar la respuesta correcta en cada control.

Agregar un controlador de eventos al temporizador

Ahora que tiene una manera de comprobar las respuestas, puede escribir el código para el controlador de eventos Tick. Este código se ejecuta cada segundo, después de que el temporizador genere un evento Tick. Este controlador de eventos comprueba las respuestas del usuario mediante una llamada a CheckTheAnswer(). También comprueba cuánto tiempo ha transcurrido en la prueba.

  1. En el formulario, haga doble clic en el control Timer o selecciónelo y pulse la tecla Entrar. Estas acciones agregan un controlador de eventos Tick al temporizador. Aparece el editor de código y muestra el método del controlador Tick.

  2. Agregue las siguientes instrucciones al nuevo método de control de eventos.

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

Cada segundo de la prueba, se ejecuta este método. El código comprueba primero el valor que CheckTheAnswer() devuelve.

  • Si todas las respuestas son correctas, ese valor es true y finaliza la prueba:

    • El temporizador se detiene.
    • Aparece un mensaje de enhorabuena.
    • La propiedad Enabled del control startButton se establece en true para que el jugador pueda iniciar otra prueba.

  • Si CheckTheAnswer() devuelve false, el código comprueba el valor de timeLeft:

    • Si esta variable es mayor que 0, el temporizador resta 1 de timeLeft. También actualiza la propiedad Text del control timeLabel para mostrar al jugador cuántos segundos quedan.
    • Si no queda tiempo, el temporizador se detiene y cambia el texto timeLabel a Se acabó el tiempo. Un cuadro de mensaje anuncia que se ha terminado la prueba y se revelan las respuestas. El botón Iniciar vuelve a estar disponible.

Inicio del temporizador

Para iniciar el temporizador cuando se inicie la prueba, agregue tres líneas al final del método StartTheQuiz(), como se muestra en el ejemplo siguiente.

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

Al empezar la prueba, este código establece la variable timeLeft en 30 y la propiedad Text del control timeLabel se establece en 30 segundos. A continuación, el método Start() del control Timer inicia la cuenta atrás.

Ejecutar la aplicación

  1. Guarde el programa y ejecútelo.

  2. Seleccione Iniciar la prueba. El temporizador iniciará la cuenta atrás. Cuando se agota el tiempo, la prueba finaliza y se muestran la respuestas.

  3. Inicie otra prueba y proporcione respuestas correctas a los problemas matemáticos. Cuando responda correctamente dentro del límite de tiempo, se abrirá un cuadro de mensaje, el botón Iniciar estará disponible y el temporizador se detendrá.

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

Pasos siguientes

Avance al siguiente tutorial para aprender a personalizar la prueba matemática.

Tutorial parte 4: Personalización de una aplicación de prueba matemática en WinForms