Compartir vía

Tutorial: Adición de un temporizador a una aplicación winForms de prueba matemática

  • Artículo

En esta serie de cuatro tutoriales, crearás un cuestionario de matemáticas. El cuestionario contiene cuatro problemas matemáticos aleatorios que un participante del cuestionario intenta 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 cuestionario.

En este tercer tutorial, aprenderá a:

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

Prerrequisitos

Este tutorial se basa en tutoriales anteriores, comenzando con Crear una aplicación WinForms de prueba matemática. Si no ha completado esos tutoriales, consulte primero estos tutoriales.

Adición de 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 que queda.

  1. Agregue una variable entera denominada timeLeft de la misma manera que declaró 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 ejemplo siguiente.

    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;

  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 genere un evento de Tick 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 agota el tiempo o si las respuestas son correctas, el cuestionario debe finalizar.

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

/// <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 usa la palabra clave Function en lugar de la palabra clave Sub habitual porque este método devuelve un valor.

  • No se puede introducir fácilmente el signo de multiplicación (×) y el signo de división (÷) mediante el teclado, por lo que C# y Visual Basic aceptan un asterisco (*) para la multiplicación y una 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 un valor de false.

  • La instrucción if usa la propiedad Value de un control NumericUpDown para acceder al valor actual del control. En la sección siguiente, se usa 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 cuestionario llamando 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. El editor de código aparece y muestra el método del controlador Tick.

    Para C#, agrega una línea de código en el archivo de código Form1.Designer.cs que enlaza el controlador de eventos:

    timer1.Tick += new EventHandler(timer1_Tick);

    (Para Visual Basic, no es necesario esa línea, pero el controlador de eventos contiene un handles Timer1.Tick que hace lo mismo).

  2. Agregue las siguientes instrucciones al nuevo método de controlador 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, este método se ejecuta. El código comprueba primero el valor que CheckTheAnswer() devuelve.

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

    • El temporizador se detiene.
    • Aparece un mensaje de felicitación.
    • 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 participante del cuestionario cuántos segundos quedan.
    • Si no queda tiempo, el temporizador se detiene y cambia el timeLabel texto a ¡Se acabó el tiempo! Un cuadro de mensaje anuncia que se ha terminado el cuestionario y se revelan las respuestas. El botón Iniciar vuelve a estar disponible.

Iniciar el temporizador

Para iniciar el temporizador cuando se inicia 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();
}

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

Ejecución de la aplicación

  1. Guarde el programa y ejecútelo.

  2. Seleccione Iniciar la prueba. El temporizador comienza a contar la cuenta atrás. Cuando se agota el tiempo, finaliza la prueba y aparecen las respuestas.

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

    Captura de pantalla que muestra un cuestionario completado con 19 segundos restantes. El botón Iniciar el cuestionario está disponible.

Pasos siguientes

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

Tutorial parte 4: Personalizar una aplicación WinForms para un cuestionario de matemáticas