Dedicado a mis proyectos en Gambas ,un lenguaje de programación parecido al Visual Basic + Java pero ampliamente mejorado y...¡¡para gnu/linux!!.La potencia del gnu/linux sumada a la facilidad del Basic



Consultas, Desarrollo de programas y petición de presupuestos:



sábado, 21 de febrero de 2015

Desarrollo de simple juego didáctico: Preguntas sobre un mapa


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:

Public struct PreguntasRespuestas
     x as integer
     y as integer
     pregunta as string
     respuesta as string
End struct