Programando tu propio TRIVIAL paso a paso (I)

Creando juego trivial con PHP

Hoy os voy a ayudar a programar tu propio juego de preguntas y respuestas que, con un poco de esfuerzo, podrás convertir en un verdadero juego tipo TRIVIAL.

Este proyecto fuė uno de los que realizé durante mis estudios de Fullstack Developer y por eso, quiero agradecer a mi profesor JUAN PABLO, la paciencia que tuvo y lo mucho que me ayudó.

El funcionamiento es bastante simple, pero es necesario seguir los pasos ya que este programa de preguntas y respuestas debe hacer muchas cosas para que funcione correctamente.

Usaremos PHP y algo (muy poco) de AJAX.

Supongo que estarás un poco familiarizado con el concepto básico del AJAX.

AJAX no es un lenguaje de programación, sino un conjunto de tecnologías (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML) que nos permiten hacer páginas de internet más interactivas.

La característica fundamental de AJAX es permitir actualizar parte de una página con información que se encuentra en el servidor sin tener que refrescar completamente la página.

De modo similar podemos enviar información al servidor.

Veréis que se entiende muy bien.

Al final, ya sabemos que sólo son preguntas con respuestas, pero tiene su intringulis. Pero no temas, al final todo queda muy claro. Si yo he sido capaz de completarlo….

Vamos a empezar esta primera parte de la entrada con lo mas importante, LA BASE DE DATOS.

Es muy importante hacer correctamente esa base de datos ya que tiene que guardarnos muchos datos y lo tiene que hacer correctamente.

Tendrá 3 tablas:

  • Preguntas, con sus respuestas (incluida la correcta por cada pregunta)
  • Resultados . Debe guardar las preguntas respondidas por cada usuario (nos servirá para hacer un ránking en el futuro)
  • Usuarios. Nombres y contraseñas.

Es importante hacer la tabla ‘resultados‘ entre ‘preguntas‘ y ‘usuarios‘ para evitar que a un mismo usuario se le muestre alguna pregunta que ya ha respondida.

Una vez entendido esto, pasamos a crear la base de datos. Has de llamarla ‘trivial’.

1. CREAMOS LA BASE DE DATOS

Ahora, a través de una consulta SQL, inserta el código siguiente:

Bueno, ya tienes creada la base de datos pero …. ESTÁ VACIA !!!

Si, no he puesto ni preguntas ni respuestas. Eso te lo dejo a tí como ejercicio.

Puedes hacerlo de 2 maneras diferentes:

  • 1. Accediendo a la base de datos y rellenando los campos directamente
  • 2. Creando un CRUD para gestionar la base de datos y poder añadir, borrar o modificar las preguntas que quieras incluir en el juego.

Si  lo necesitas, puedes consultar esta entrada donde te explico cómo hacer un CRUD de cualquier base de datos.

LA RESPUESTA CORRECTA SIEMPRE HA DE SER LA OPCIÓN 1 DE LAS 4 OPCIONES.

Una vez preparada la base de datos con tus nuevas preguntas y respuestas, ahora vamos con la estructura del programa:

2. Estructura de archivos del programa.

  • login.php Preguntamos al usuario su nombre y contraseña y se valida o se registra en el caso de que sea un nuevo usuario jugador.
  • index.php  La página principal. Nuestro «tablero de juego».
  • trivial.js  La página de javascript que se encarga de hacer las peticiones de ajax.
  • libreria.php  Página con todas las funciones que requieran de conexión a la base de datos.
  • pregunta.php  La página de backend de Ajax que nos devuelve una fila de la base de datos
  • resultado.php  La página de backend de Ajax que nos guarda los resultados que le pasemos.

login.php

Podrás ver que se compone de un simple formulario que te pide un ‘nombre’ y un ‘password’. Recuperamos esos dos campos y, mediante la función comprobarUsuario() comprobamos si dicho usuario existe y si  la contraseña es correcta.

Si todo es correcto nos redirigen a index.php. En caso de error de contraseña salta un error y , si el usuario no existe, se crea como nuevo jugador.

Aqui pongo el código de este primer archivo.

index.php

Al llegar a este archivo, comprobamos si estamos logeados para poder seguir jugando. En caso contrario, nos devuelve a login.php

Si todo es correcto, recuperamos la puntuación con la funcion getPuntuacion()

El resto del archivo index.php es el ‘tablero de juego’.

Aquí, puedes explayarte utilizando todo el CSS o Bootstrap que desees para convertir esta parte en un estupendo tablero de juego de preguntas. Eso lo dejo a tu criterio.

Verás que al final de este archivo ya hemos cargado el archivo trivial.js

Eso es porque, para cargar preguntas, necesitamos 3 cosas:

Buscamos una pregunta por AJAX …

…. y se la enviamos al archivo pregunta.php

Como podrás observar, he configurado el juego para que la respuesta correcta sea siempre la respuesta1. Puedes modificarlo, si lo necesitas. Recuerda que también lo tenemos preparado para que el tablero nos muestre las 4 opciones posibles desordenadas.

Ahora recibimos la pregunta y la mostramos en el tablero:

Podrás observar que, para recibir la pregunta, usamos la funcion getPregunta() que nos devuelve una pregunta de la base de datos que no se haya hecho antes a este mismo usuario. Esta es la consulta SQL:

( luego veremos más detalladamente el archivo libreria.php )

Y ahora, una vez tenemos la pregunta nueva y mostrada en nuestro tablero, sólo nos queda esperar a que el usuario responda con un click de su raton en una de las 4 opciones mostradas. En ese momento comprobaremos si la respuesta seleccionada es o no la respuesta correcta.

Y esto lo hacemos con la tercera parte del archivo trivial.js

Y una vez se ha comprobado que el usuario ha respondido, se manda el resultado a resultado.php.

Pero eso lo veremos en la segunda parte de esta entrada, junto con el archivo libreria.php

Compartir esta entrada.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

CAPTCHA ImageChange Image