Desarrollo de simple juego didáctico: Preguntas sobre un mapa
En este artículo desarrollaré un simple juego didáctico, que tratará sobre preguntas sobre un mapa (se puede usar también cualquier tema, por ejemplo sobre un dibujo de anatomía, etc). El objetivo del programa es ir colocando un botón en distintos sitios del mapa, y se hacer una pregunta referida a donde esta el botón situado.
Bien empezamos:
Vamos a hacerlo sobre un mapa de Andalucía, y preguntar el nombre de las provincias.
1) Partimos de este mapa:
2) Vamos a tomar los datos que necesitamos:
2.1) Nos preparamos la siguiente tabla, con los datos donde vamos a colocar el botón (las coordenadas) , preguntas y respuesta.
| Posicion del botón | ||||
| indice | x | y | Pregunta | Respuesta |
| 0 | 156 | 323 | ¿cual es el nombre de la provincia? | Cádiz |
| 1 | 40 | 180 | ¿cual es el nombre de la provincia? | Huelva |
| 2 | 166 | 193 | ¿cual es el nombre de la provincia? | Sevilla |
| 3 | 289 | 291 | ¿cual es el nombre de la provincia? | Málaga |
| 4 | 556 | 260 | ¿cual es el nombre de la provincia? | Almería |
| 5 | 420 | 253 | ¿cual es el nombre de la provincia? | Granada |
| 6 | 437 | 127 | ¿cual es el nombre de la provincia? | Jaén |
| 7 | 262 | 119 | ¿cual es el nombre de la provincia? | Córdoba |
Nota:
Las coordenadas x e y de la tabla, las puedo obtener viendo el cursor en gimp cuando me desplazo por el mapa.
2.2) Al mapa que tengo, le voy a borrar los nombres, eso lo puedo hacer con Gimp:
He usado la "herramienta de clonado" de gimp, y queda muy bien :)
3) En el siguiente esquema podemos ver lo que tiene que hacer el programa:
4) ¿como introduzco los datos de posiciones y preguntas y respuestas en el programa?
4.1) Vamos a usar arrays de point (http://gambaswiki.org/wiki/comp/gb.qt4/point?l=es), para guardar las coordenadas x, e y. Esta la usaremos para saber donde tengo que colocar el botón de pregunta.
Public ArrayCoordenadas As New Point[] 'array de coordenadas del botón pregunta
4.2) Vamos a crear una estructura de datos para almacenar la pregunta y respuesta:
Public Struct PreguntaRespuestas
preguna As String
respuesta As String
End Struct
Y crearemos un array de la estructura "PreguntaRespuestas", para manejar los datos:
Public ArrayPyR As New PreguntaRespuestas[] 'array de datos de preguntas y respuestas
4.3) Crearemos un subrutina para introducir los datos de la tabla, en nuestras estructuras de datos:
Public Sub cargodatos()
Dim datopoint As New Point
Dim datotmp As New PreguntaRespuestas
datotmp.preguna = ("¿cual es el nombre de la provincia?")
datotmp.respuesta = "Cádiz"ArrayPyR.Add(datotmp) 'el 1º dato es cadiz
datopoint.x = 156
datopoint.y = 323
ArrayCoordenadas.Add(datopoint) 'coordenada de cadiz
'---------------------------------
datopoint = New Point 'hago una nueva instancia
datotmp = New PreguntaRespuestas 'hago una nueva instancia
datotmp.preguna = ("¿cual es el nombre de la provincia?")
datotmp.respuesta = "Huelva"
ArrayPyR.Add(datotmp)
datopoint.x = 40
datopoint.y = 180
ArrayCoordenadas.Add(datopoint)
......
5) Cuando el usuario haga click en el botón Preguntar, el programa eligirá un numero aleatorio, y mostrará el botón de pregunta en la posicion que indique el array de coordenadas usando el numero aleatorio elegido como indice.
Public Sub ButtonEmpezar_Click()
numero = Int(Rnd(0, ArrayCoordenadas.count)) 'redondeo para obtener un numero entero
ButtonPregunta.x = ArrayCoordenadas[numero].XButtonPregunta.y = ArrayCoordenadas[numero].YButtonPregunta.Visible = True 'muestro el boton de pregunta
End
6) El usuario pulsa en el botón de pregunta.
Usamos el numero elegido aleatoriamente en el paso anterior, para mostrar la pregunta y respuesta (usando como indice el numero aleatorio en el array ArrayPyR[]
Mostramos un formulario para mostrar la pregunta y que el usuario pueda escribir la respuesta.
respuestaUsuario = InputBox(ArrayPyR[numero].preguna)
Si la respuesta es acertada, se lo decimos, sino, mostramos la respuesta correcta:
If Upper$(respuestaUsuario) = Upper$(ArrayPyR[numero].respuesta) ThenMessage.Info(("Muy bien !!! Acertaste"))ElseMessage.Error(("Te equivocaste, la respuesta correcta era:") & "\n" & ArrayPyR[numero].respuesta)
Endif
7) Finalmente ocultamos el botón pregunta, y el programa esperará a que se pulse de nuevo el botón empezar para repetir el proceso.
En este video podeis ver el programa en funcionamiento:
Y en este video explico los pasos que he seguido para hacer el programa:
Diagrama de secuencia
Modificación del mapa con gimp (toma de coordenadas, borrado de zonas, redimensionamiento del mapa)
Codificación
Código fuente e instalador .deb del programa: enlace alojado en google drive
Saludos:
Nota:
Hay una mejora que se me ocurrio cuando hice los videos.
En ver de usar un Arrray Point y otro array de estructura PreguntaRespuesta, más simple hubiese sido definir una estructura que tuviera todas las propiedades, algo asi como:
Saludos:
Nota:
Hay una mejora que se me ocurrio cuando hice los videos.
En ver de usar un Arrray Point y otro array de estructura PreguntaRespuesta, más simple hubiese sido definir una estructura que tuviera todas las propiedades, algo asi como:
Public struct PreguntasRespuestas
x as integer
y as integer
pregunta as string
respuesta as string
End struct