lunes, 22 de octubre de 2018

PROYECTO VB TABLAS DE MULTIPLICAR


ÁREA DE TECNOLOGÍA E INFORMÁTICA
GRADO DÉCIMO
PROYECTO VB: LAS TABLAS DE MULTIPLICAR

OBJETIVO: Diseñar e implementar una aplicación en VB que permita a un usuario mostrar su conocimiento sobre las tablas de multiplicar y le indique de sus errores y aciertos.

CONDICIONES:
1.       El programa debe brindar las opciones de tablas del 1 al 10.
2.       Las opciones serán excluyentes, es decir, escogida una tabla en especial no se pueden trabajar otras.
3.       Las operaciones planteadas deben aparecer automáticamente, al hacer escogencia de una tabla.
4.       El usuario debe escribir los resultados.
5.       Se indicará visualmente, mediante el uso de los colores rojo y verde en el fondo del espacio en que se escribieron las respuestas, de los errores o aciertos en las respuestas.
6.       Debe existir la posibilidad de borrar los contenidos en los espacios de respuesta y los colores de fondo.
7.       Cuando se cambie de tabla, se deben limpiar contenidos y colores de fondo de todos los espacios de respuesta.

DISEÑO DE INTERFAZ GRÁFICA (GUI)



OBSERVACIONES:
·         En esta ocasión cambiamos dos propiedades en el formulario, que en otros proyectos no habíamos tocado, y son: FormBorderStyle y MaximizeBox. ¿Que obtuvimos 


Que no aparezcan los botones de minimizar y maximizar en la ventana:











Que al dar doble clic sobre la barra de título de la ventana de nuestra aplicación, no se maximice, como generalmente ocurre.

·         La apariencia del RadioButton por defecto es la siguiente:

Para este caso cambiamos la propiedad Appearance al valor Button, con lo que logramos la apariencia de botón:

Obteniendo un “teclado” como se vio en la GUI:

·      En las 10 label o etiquetas en las que se mostrarán las operaciones planteadas, la propiedad Text se deja sin contenido porque las diferentes multiplicaciones que se muestren al usuario, se cargaran en dicha propiedad en tiempo de ejecución y no en tiempo de diseño. Esto implica que las label se vean así:


·           Para las cajas de texto (TextBox), en las cuales el usuario escribirá las respuestas y las etiquetas (Label), propongo nombres muy parecidos. Para diferenciarlos debemos tener en cuenta las tres letras prefijadas al nombre, como vemos en el siguiente ejemplo:




Ahora podemos comenzar a escribir nuestro código fuente.

CÓDIGO FUENTE

Comencemos pensando en que las condiciones exigidas para el programa son siete (7), de las cuales por la implementación de la interfaz gráfica GUI se solucionan las siguientes:


·         El programa debe brindar las opciones de tablas del 1 al 10 y
·         Las opciones serán excluyentes, es decir, escogida una tabla en especial no se pueden trabajar otras.

Se solucionó al implementar los 10 RadioButton, que tienen por característica dar opciones excluyentes a los usuarios de una aplicación.

·         El usuario debe escribir los resultados.

Se solucionó al implementar las 10 TextBox en las cuales el usuario escribirá las respuestas.

·         Las operaciones planteadas deben aparecer automáticamente, al hacer escogencia de una tabla.

Esta opción implica repetir la operación cada vez que se escoja una tabla. Entonces, vamos a implementar una subrutina que será llamada cada vez que se escoja cada una de las opciones. El código fuente será:


Observaciones:

ü  Numero es el argumento que le pasamos a la función y corresponde al número de la tabla.
ü  Con el uso del signo = cargamos en la propiedad Text de cada etiqueta en que se muestran las operaciones propuestas, el número de la tabla escogida por el usuario y lo encadenamos mediante el signo & con el texto X 1 =” que debe ir entre comillas por ser un tipo de dato texto. Obsérvese que se debe dejar un espacio antes de la X, para que el número de la tabla no quede “pegado”. En la siguiente gráfica vemos lo que producen cada una de las diez líneas de código de la sub rutina anterior, y el ejemplo específico de la etiqueta lblPorUno cuando se escogió la tabla del número 8:


·         Se indicará visualmente, mediante el uso de los colores rojo y verde en el fondo del espacio en que se escribieron las respuestas, de los errores o aciertos en las respuestas.

Pensemos en lo siguiente:

Cada tabla tiene 10 valores que nunca van a cambiar. Son los resultados del número de la tabla por los números del 1 al 10. Entonces podemos en cada tabla fácilmente evaluar si el resultado está bien o mal, y “pintar” de verde o rojo el fondo de la caja de texto en que se escribió dicho resultado por parte del usuario de nuestro programa.

Vamos a crear otra subrutina que se encargue de esto, cuyo código fuente puede ser:


Observaciones:

ü  Esta subrutina necesita 10 números como argumentos, que son los 10 resultados de cada operación y que como se dijo no cambiarán nunca. Estos valores se envían en variables llamadas X1 hasta X10.
ü   Por lo anterior la condición a evaluar es que el valor numérico escrito por el usuario en la caja de texto sea igual al valor que pasamos como argumento a la subrutina. 


ü  Si lo anterior es verdadero “pintamos” de verde el fondo de cada caja de texto, indicando visualmente que la respuesta es correcta.
 à Ej. txtPorUno.BackColor = Color.GreenYellow

En la cual BackColor es la propiedad en la cual se asigna el color de fondo y GreenYellow es el color verde amarillo.

ü  Pero si no es así, si los dos valores no coinciden, entonces “pintamos” de rojo el fondo, indicando que se incurrió en error al escribir la respuesta.
Ej.



·         Debe existir la posibilidad de borrar los contenidos en los espacios de respuesta y los colores de fondo.
·         Cuando se cambie de tabla, se deben limpiar contenidos y colores de fondo de todos los espacios de respuesta.

Para borrar los contenidos de las cajas de texto, creamos una sub rutina con el siguiente código fuente:


Observaciones:

ü  Esta subrutina no necesita de argumentos pues no hace procesamiento de información.
ü  Para limpiar una caja de texto basta con “cargar” en ella una cadena de caracteres vacía que se indica con las comillas sin contenido entre ellas “”.

Para “blanquear” los fondos de las cajas de texto también creamos una subrutina con el siguiente código fuente:

Sub BlanquearCajasTexto()
' Blanqueamos el fondo de las cajas de texto
        txtPorUno.BackColor = Color.White
        txtPorDos.BackColor = Color.White
        txtPorTres.BackColor = Color.White
        txtPorCuatro.BackColor = Color.White
        txtPorCinco.BackColor = Color.White
        txtPorSeis.BackColor = Color.White
        txtPorSiete.BackColor = Color.White
        txtPorOcho.BackColor = Color.White
        txtPorNueve.BackColor = Color.White
        txtPorDiez.BackColor = Color.White
End Sub
     
                Es similar a pintar el fondo de las cajas de texto en rojo o verde.

El proceso del programa se inicia cuando el usuario da clic sobre uno de los botones en que aparecen los números de las tablas. Entonces debemos programar este evento que es el CheckedChanged, que indica que fue chequeado o seleccionado. En tiempo de diseño damos doble clic sobre el RadioButton que queramos programar y escribimos:


Se repite este código con cada uno de los RadioButton, que representan las tablas de multiplicar.

Luego de esto, el usuario escribe las respuestas en las cajas de texto dispuestas para tal fin. A continuación pulsa el botón EVALUAR, que le permitirá verificar los resultados obtenidos, es decir, sus errores y aciertos.

¿Qué hace el botón EVALUAR?

Cuando el usuario pulsa el botón Evaluar, se debe llamar la subrutina Evaluar. Para esto le debemos pasar como argumentos los 10 valores correspondientes a la tabla escogida por él.

Veamos el código fuente:

Private Sub btnEvaluar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnEvaluar.Click 'Esta línea la da VB
        'Evaluación del uno
        If radUno.Checked = True Then
            Evaluar(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
        End If
        'Evaluación del DOS
        If radDos.Checked = True Then
            Evaluar(2, 4, 6, 8, 10, 12, 14, 16, 18, 20)
        End If
.
. 'igual para todos los demás números
.
End Sub

Observaciones:

ü  La línea à If radUno.Checked = True Then à evalúa si el RadioButton que representa el número Uno fue escogida por el usuario.
ü  En caso de que esto sea verdadero, se llama la función Evaluar y se le dan como argumentos los números que son los 10 resultados de dicha tabla.

Cuando el usuario cambia de tabla, automáticamente se borran los resultados escritos en la tabla anterior por él y se blanquean las cajas de texto. Esto lógicamente se hace sin la intervención directa del usuario.

Pero si el usuario quiere que esto suceda, se implementó el botón borrar, que hace la misma función. El código fuente es:

Private Sub btnBorrar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnBorrar.Click 'Línea dada por VB
'llamado a la subrutina que borra los resultados de las cajas de texto
        BorrarCajasTexto()
'llamado a la subrutina que blanquea el fondo de las cajas de texto
        BlanquearCajasTexto()
End Sub

El código total del programa es:

Public Class frmTablas
    'Borramos todos los contenidos de las cajas de texto
    Sub BorrarCajasTexto()
        txtPorUno.Text = ""
        txtPorDos.Text = ""
        txtPorTres.Text = ""
        txtPorCuatro.Text = ""
        txtPorCinco.Text = ""
        txtPorSeis.Text = ""
        txtPorSiete.Text = ""
        txtPorNueve.Text = ""
        txtPorOcho.Text = ""
        txtPorDiez.Text = ""
    End Sub
______________________________________________________________________________________
    Sub BlanquearCajasTexto() ' Blanqueamos el fondo de las cajas de texto
        txtPorUno.BackColor = Color.White
        txtPorDos.BackColor = Color.White
        txtPorTres.BackColor = Color.White
        txtPorCuatro.BackColor = Color.White
        txtPorCinco.BackColor = Color.White
        txtPorSeis.BackColor = Color.White
        txtPorSiete.BackColor = Color.White
        txtPorOcho.BackColor = Color.White
        txtPorNueve.BackColor = Color.White
        txtPorDiez.BackColor = Color.White
    End Sub
______________________________________________________________________________________
    Sub MostrarMultiplicación(ByVal Numero)
        lblNumPorUno.Text = Numero & " X 1 ="
        lblNumPorDos.Text = Numero & " X 2 ="
        lblNumPorTres.Text = Numero & " X 3 ="
        lblNumPorCuatro.Text = Numero & " X 4 ="
        lblNumPorCinco.Text = Numero & " X 5 ="
        lblNumPorSeis.Text = Numero & " X 6 ="
        lblNumPorSiete.Text = Numero & " X 7 ="
        lblNumPorOcho.Text = Numero & " X 8 ="
        lblNumPorNueve.Text = Numero & " X 9 ="
        lblNumPorDiez.Text = Numero & " X 10 ="
    End Sub
______________________________________________________________________________________
    Sub Evaluar(ByVal X1, ByVal X2, ByVal X3, ByVal X4, ByVal X5, ByVal X6, ByVal X7, ByVal X8, ByVal X9, ByVal X10)
        'Evaluación de los resultados digitados por el usuario señalando con color verde las respuestas correctas
        'y con rojo las incorrectas
        If Val(txtPorUno.Text) = X1 Then
            txtPorUno.BackColor = Color.GreenYellow
        Else
            txtPorUno.BackColor = Color.Red
        End If
        If Val(txtPorDos.Text) = X2 Then
            txtPorDos.BackColor = Color.GreenYellow
        Else
            txtPorDos.BackColor = Color.Red
        End If
        If Val(txtPorTres.Text) = X3 Then
            txtPorTres.BackColor = Color.GreenYellow
        Else
            txtPorTres.BackColor = Color.Red
        End If
        If Val(txtPorCuatro.Text) = X4 Then
            txtPorCuatro.BackColor = Color.GreenYellow
        Else
            txtPorCuatro.BackColor = Color.Red
        End If
        If Val(txtPorCinco.Text) = X5 Then
            txtPorCinco.BackColor = Color.GreenYellow
        Else
            txtPorCinco.BackColor = Color.Red
        End If s
        If Val(txtPorSeis.Text) = X6 Then
            txtPorSeis.BackColor = Color.GreenYellow
        Else
            txtPorSeis.BackColor = Color.Red
        End If
        If Val(txtPorSiete.Text) = X7 Then
            txtPorSiete.BackColor = Color.GreenYellow
        Else
            txtPorSiete.BackColor = Color.Red
        End If
        If Val(txtPorOcho.Text) = X8 Then
            txtPorOcho.BackColor = Color.GreenYellow
        Else
            txtPorOcho.BackColor = Color.Red
        End If
        If Val(txtPorNueve.Text) = X9 Then
            txtPorNueve.BackColor = Color.GreenYellow
        Else
            txtPorNueve.BackColor = Color.Red
        End If
        If Val(txtPorDiez.Text) = X10 Then
            txtPorDiez.BackColor = Color.GreenYellow
        Else
            txtPorDiez.BackColor = Color.Red
        End If
    End Sub
______________________________________________________________________________________
    Private Sub radUno_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radUno.CheckedChanged
        'Mostramos todas las multiplicaciones por uno
        MostrarMultiplicación(1)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________

    Private Sub radDos_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radDos.CheckedChanged
        'Mostramos todas las multiplicaciones por dos
        MostrarMultiplicación(2)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________
    Private Sub radTres_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radTres.CheckedChanged
        MostrarMultiplicación(3)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________
    Private Sub radCuatro_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radCuatro.CheckedChanged
        MostrarMultiplicación(4)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________
    Private Sub radCinco_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radCinco.CheckedChanged
        MostrarMultiplicación(5)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________
    Private Sub radSeis_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radSeis.CheckedChanged
        MostrarMultiplicación(6)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________
    Private Sub radSiete_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radSiete.CheckedChanged
        MostrarMultiplicación(7)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________
    Private Sub radOcho_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radOcho.CheckedChanged
        MostrarMultiplicación(8)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________
    Private Sub radNueve_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radNueve.CheckedChanged
        MostrarMultiplicación(9)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________
    Private Sub radDiez_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles radDiez.CheckedChanged
        MostrarMultiplicación(10)
        'borramos y blanqueamos todas las cajas de texto
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
______________________________________________________________________________________
    Private Sub btnEvaluar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnEvaluar.Click
        'Evaluación del uno
        If radUno.Checked = True Then
            Evaluar(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
        End If
        'Evaluación del DOS
        If radDos.Checked = True Then
            Evaluar(2, 4, 6, 8, 10, 12, 14, 16, 18, 20)
        End If
        'Evaluación del TRES
        If radTres.Checked = True Then
            Evaluar(3, 6, 9, 12, 15, 18, 21, 24, 27, 30)
        End If
        'Evaluación del CUATRO
        If radCuatro.Checked = True Then
            Evaluar(4, 8, 12, 16, 20, 24, 28, 32, 36, 40)
        End If
        'Evaluación del CINCO
        If radCinco.Checked = True Then
            Evaluar(5, 10, 15, 20, 25, 30, 35, 40, 45, 50)
        End If
        'Evaluación del SEIS
        If radSeis.Checked = True Then
            Evaluar(6, 12, 18, 24, 30, 36, 41, 48, 54, 60)
        End If
        'Evaluación del SIETE
        If radSiete.Checked = True Then
            Evaluar(7, 14, 21, 28, 35, 42, 49, 56, 63, 70)
        End If
        'Evaluación del OCHO
        If radOcho.Checked = True Then
            Evaluar(8, 16, 24, 32, 40, 48, 56, 64, 72, 80)
        End If
        'Evaluación del NUEVE
        If radNueve.Checked = True Then
            Evaluar(9, 18, 27, 36, 45, 54, 63, 72, 81, 90)
        End If
        'Evaluación del DIEZ
        If radDiez.Checked = True Then
            Evaluar(10, 20, 30, 40, 50, 60, 70, 80, 90, 100)
        End If
    End Sub
______________________________________________________________________________________
    Private Sub btnBorrar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnBorrar.Click
        BorrarCajasTexto()
        BlanquearCajasTexto()
    End Sub
End Class

Hecho todo lo anterior podemos ejecutar nuestro programa que debe funcionar de acuerdo a los requerimientos iniciales.


No hay comentarios:

Publicar un comentario