- aluche
- audio
- camera raw
- cine
- economía
- escenas cotidianas
- fotografía
- horticultura
- informática
- internet
- libros
- moralzarzal
- música
- niños
- otros
- personal
- photoshop
- política
- premiere
- programación
- psicología
- Sin categoría
- vídeo
- vídeos
- vivienda
Qqquizzes, un sencillo juego de preguntas y respuestas en html5 y javascript
He programado Qqquizes, un sencillo juego de preguntas y respuestas en html5 y javascript. Lo podeis probar aquí.
Ojo, sólo funciona en las últimas versiones de Chrome (y alguno más, pero sólo lo he probado en Chrome) porque el api que uso para que me lea los textos (Speech Synthesis API no está muy soportado. Funciona en ordenadores, tabletas y móviles, estos últimos por lo menos en Android.
Lo he hecho por dos motivos:
- Hacer un juego para mis hijos con mis propias preguntas
- Ponerme un poco con el tema de html5, objetos javascript, bootstrap y jquery, porque me estaba quedando bastante desfasado
Programación:
Cuento un poco la programación, para quien le interese.
Es muy sencilla. He intentado hacerlo lo mas MVC posible, sin usar ningún framework para ello aparte de jquery.
Por un lado tengo el model, que consta de los objetos QQQuizzAppModel, QQQuizz, QQQuestion y QQAnswer.
En este caso es muy sencillo, casi todo es inicializar los objetos y algun método de consulta, ya que la aplicación no hace modificaciones, no guarda datos, no se conecta a un servidor…
Por otro lado tengo un único objeto controller, el QQQuizzAppController, el cual inicializa el model y tiene todos los listeners.
La idea es que el html lanza eventos que coge el controller y es el controller el que modifica el model si es necesario. Ni el html (view) sabe nada del model ni el model sabe nada ni accede al view. De esta manera la programación es más limpia, robusta, elegante, comprensible, seguible, actualizable, mantenible…
El view esta formado por los html.
El juego consta de una única pagina, el index.html (qqquizzes.html en el zip descargable), el cual de entrada solo hace esto:
controller = new QQQuizzAppController(json);
controller.home(false);
es decir, inicializa los objetos a partir del json de preguntas, pone los listeners y muestra la home.
Sistema de plantillas:
Normalmente cuando tienes que pintar html con javascript se construye la cadena más o menos así:
var s = ”;
s += ‘
…
Pero aquí he usado Handlebars, que es un poco más elegante, menos coñazo y menos propenso a errores.
Me traigo las diferentes plantillas por ajax (ver nota del final del post) y las tengo cacheadas en memoria para no hacer llamadas innecesarias.
Tengo una plantilla para cada sección del juego.
Cuando clicko en un elemento básicamente lo que se hace es:
- presenta un “loading” en la parte donde se está cargando (si carga muy rápido no llega a verse)
- obtiene el html a partir de la plantilla y el objeto correspondiente
- muestra el html y oculta el loading
Y así más o menos todo.
No cuento más, al que le interese se puede bajar el zip, que es muy seguible.
Teneis el juego en un zip aquí por si quereís echar un ojo a la programación o para ejecutarlo en vuestros propios equipos sin conexión a internet e incluso con vuestras propias preguntas.
Para poner vuestras propias preguntas solo tenéis que hacer las imágenes y tocar el archivo json.js. Con un simple vistazo veis cómo va.
Para ejecutarlo solo tenéis que abrir el qqquizzes.html con Google Chrome.
En tabletas tenéis que poner una ruta de este tipo en la barra de direcciones del Chrome:
file:///mnt/sdcard/ninos/qqquizzes/html/qqquizzes.html
Para poner un acceso directo en el escritorio de las tabletas y que se abra en el Chrome sólo he encontrado esta manera viable (para Android, en el resto no sé):
- si no teneís la última versión del Chrome instaladla
- instalar esta app https://play.google.com/store/apps/details?id=ru.gelin.android.browser.open&hl=en
- abrirla y elegir Chrome
- crear acceso directo del qqquizzes.html con el gestor de archivos que tengáis, por ejemplo el ES Explorador de Archivos. En el zip el html lo he llamado qqquizzes.html para que el acceso directo se cree con ese nombre en lugar de index.hml
Nota:
Como quiero que el juego funcione en local (ejecutando el html sin tener un servidor web ni conexión a internet), no he podido usar ajax para lo de las templates por restricciones de seguridad, así que lo he hecho sin ajax, pero en el código está comentado cuando lo hacía por ajax.
Edición:
He subido el código a github.com
Esta muy bueno pero por ejemplo como podría yo agregarle un contador de preguntas correctas y que tenga límite de tiempo por ejemplo q se cierre en diez minutos y salga un mensaje con el número de preguntas correctas
Hhh