Á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.
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.
