En este artículo quiero exponer el desafío de crear un juego de memoria en WordPress, a través de plugins y sin tocar código. Bueno, quizá tengamos que realizar algún ajuste, pero la gran parte del trabajo lo desarrollé son tocar código.
Desafío: Memory card para WordPress
En primer lugar el desafío era el siguiente: Crear un sistema gamificado de memorización. El clásico juego de memoria de tarjetas. Entre las características que debía tener:
- Puntuación
- Tiempo de resolución
- Historial de puntuación por usuario
- Restringido por nivel.
Solución
Bien, para desarrollar una solución lo primero que hice fue buscar las soluciones existentes dentro de los plugins de gamificación que hoy en día existen. Yo utilizo Mycred, pero existen otros.
En la documentación de este plugin descubrí que tenían una implementación con H5P, un repositorio de código listo para implementarse. Dentro de este repositorio existe el juego de me memory card con las funcionalidades que necesitaba, se podía personalizar y ademas tenía integración con Mycred. Un triple Check que ha valido la pena.
El diseño del juego lo he retocado para que tenga más consistencia con el diseño de la web donde va a funcionar, pero es muy fácil, sólo unos cuantos retoques por CSS y listo.
Lo principal era quitar los elementos de lista que salían debajo de cada una de las tarjetas. Son los puntos negros que ves a continuación:
El código es muy simple:
Lo primero es identificar la página donde se encuentra este diseño, y después personalizar los bullets de la lista. Las tarjetas no dejan de ser una Lista, y como tal, en algunos diseños se les coloca los puntos de señalización que aquí no nos interesa tener.
Por otra parte, existe un marco que engloba todas las tarjetas de un 1px de grosor y de color gris. Quiero que sea un diseño limpio y claro, y este marco no ayuda en nada a conseguir este objetivo asi que también lo quito utilizando la propiedad display none.
Bien, a nivel de diseño lo terminé rápido, pero ahora tenía que saber cómo permitir que unos usuarios tuviesen acceso al juego y otros no. Además necesitaba poder otorgar puntos por usar ese contenido.
Puntuación
La puntuación del juego es posible obtenerla en las propias configuraciones que ofrece la librería de contenido de H5P. En mi caso sólo quería ver el tiempo invertido en resolver y la cantidad de puntos (giros de tarjeta realizados).
Tiempo de resolución
El tiempo empleado en completar el juego también se muestra por defecto después de completar el juego, así que en este aspecto también se ceñía perfectamente a lo que quería conseguir.
Historial de puntuación por usuario
Bien, aquí hemos topado con un problema. Es cierto que podemos tener un registro de la puntuación conseguida por cada usuario en el juego, pero no está disponible la opción de visualizarse en la pantalla para los suscriptores. Voy a intentar desarrollar por código la opción.
Restringido por nivel
La gestión de usuarios, sus suscripciones y los niveles otorgados a cada uno de ellos lo gestiono por medio de Restrict Content Pro. Por medio de este plugin puedo restringir el acceso al juego a miembros con una suscripción de pago, o para aquellos que tengan determinado nivel.
Conclusiones: Juego de memoria para opositores
He creado una página web orientada al estudio de oposiciones con un juego de memoria que facilita el aprendizaje de la constitución Española.
