Este documento reúne el funcionamiento completo de la página creada en las prácticas 3 y 4 de PSI. Se explicará desde el registro de un usuario en la página hasta cómo jugar a los cuestionarios creados.
Los enlaces a las páginas alojadas en render son los siguientes:
- Página principal: https://psi-p4-api.onrender.com
- Página para unirse a un juego: https://psi-p4-vue.onrender.com
En la página principal, la barra de navegación es la franja superior, y contiene el logotipo de la aplicación KahootClone, así como los botones de iniciar sesión, registrarse o cerrar sesión.
Para volver a la página de inicio, puede hacerse click en el logotipo de la aplicación en cualquier momento.
Durante el juego, los casos de empate se resuelven viendo quién se unió antes al juego.
A no ser que se indique lo contrario, todas las acciones realizadas en esta sección se harán en la página principal (enlace disponible en la sección Enlaces a las páginas).
Para acceder al registro es necesario no haber iniciado sesión con otra cuenta. Si ya se ha iniciado sesión con otra cuenta se deberá cerrar sesión primero.
- Hacer click en el botón azul de la barra de navegación (Sign Up).
- Rellenar los campos Username, Password y Password Confirmation, siguiendo las instrucciones y restricciones que aparecen en la página.
- Pulsar el botón Sign Up que se encuentra en la parte inferior del formulario. Si hay algún error en el registro, se indicará en el propio formulario.
- Tras un registro satisfactiorio, se redigirá al usuario a la página de inicio y se iniciará sesión automáticamente.
Para poder iniciar sesión es necesario haberse registrado anteriormente, y no haber iniciado sesión con otra cuenta. Si ya se ha iniciado sesión con otra cuenta se deberá cerrar sesión primero.
- Hacer click en el botón verde de la barra de navegación (Log In).
- Rellenar los campos Username y Password.
- Pulsar el botón Log In que se encuentra en la parte inferior del formulario. Si hay algún error en el inicio de sesión, se indicará en el propio formulario.
- Tras un inicio de sesión satisfactorio, se redigirá al usuario a la página de inicio, que ahora mostrará opiciones para crear cuestionarios.
El nombre de usuario o Username del usuario con el que se ha iniciado sesión aparecerá en la parte superior derecha de la página. 
Para poder cerrar sesión es necesario haber iniciado sesión anteriormente
- Hacer click en el botón rojo de la barra de navegación (Log Out).
- Tras un cierre de sesión satisfactorio, se redigirá al usuario a la página de inicio.
- Desde la página de inicio, hacer click en el botón azul Create a Questionnaire. De forma alternativa puede accederse desde la página con el listado de cuestionarios.
- Rellenar el campo Title con el título del cuestionario.
- Para finalizar la creación, hacer click en el botón verde Submit. Si se quiere cancelar la creación, hacer click en el botón rojo Cancel. Cualquier error en la creación se mostrará en el formulario.
- Tras una creación exitosa, se redirigirá al usuario al listado de todos los cuestionarios creados.
- Desde la página de inicio, hacer click en el botón con borde azul All Questionnaires.
- Desde la lista de los cuestionarios creados, hacer click en el botón con borde amarillo Edit correspondiente al cuestionario que se desea editar. Alternativamente, se puede pulsar el botón amarillo Edit desde la página de detalles del cuestionario, situado al lado del nombre del cuestionario.
- Modificar el título.
- Para guardar las modificaciones del cuestionario, hacer click en el botón verde Submit. Si se quieren cancelar, hacer click en el botón rojo Cancel. Cualquier error en la modificación se mostrará en el formulario.
- Tras una modificación exitosa, se redirigirá al usuario al listado de todos los cuestionarios creados.
- Desde la lista de los cuestionarios creados, hacer click en el botón con borde rojo Delete correspondiente al cuestionario que se desea borrar.
- Se mostrará una página de confirmación, donde se debe pulsar el botón verde Confirm para confirmar la elección, o el botón rojo Cancel para volver atrás.
- Tras borrar el cuestionario de forma exitosa, se redirigirá al usuario al listado de todos los cuestionarios creados.
- Desde el listado de los cuestionarios creados, hacer click en el nombre del cuestionario al que se quiere acceder. De forma alternativa, si el cuestionario está entre los 5 últimos creados, se podrá acceder de la misma forma desde la página de inicio, ya que el cuestionario aparecerá en el listado Your Latest Questionnaires.
- Desde la página de detalles del cuestionario, hacer click en Add question, en la última fila de la tabla.
- Rellenar el campo Question con el texto de la pregunta, y el campo AnswerTime con el tiempo (en segundos) que un usuario tendrá para responder la pregunta.
- Para finalizar la creación de la pregunta, hacer click en el botón verde Submit. Si se quiere cancelar la creación, hacer click en el botón rojo Cancel. Cualquier error en la creación se mostrará en el formulario.
- Tras una creación exitosa, se redirigirá al usuario a la página de detalles del cuestionario.
- Desde la página de detalles del cuestionario, hacer click en el botón con borde amarillo Edit correspondiente a la pregunta que se desea editar. Alternativamente, se puede pulsar el botón amarillo Edit desde la página de detalles de la pregunta, situado al lado del nombre de la pregunta.
- Modificar los campos que se deseen.
- Para guardar las modificaciones de la pregunta, hacer click en el botón verde Submit. Si se quieren cancelar, hacer click en el botón rojo Cancel. Cualquier error en la modificación se mostrará en el formulario.
- Tras una modificación exitosa, se redirigirá al usuario a la página de detalles del cuestionario.
- Desde la página de detalles del cuestionario, hacer click en el botón con borde rojo Delete correspondiente a la pregunta que se desea borrar.
- Se mostrará una página de confirmación, donde se debe pulsar el botón verde Confirm para confirmar la elección, o el botón rojo Cancel para volver atrás.
- Tras borrar la pregunta de forma exitosa, se redirigirá al usuario a la página de detalles del cuestionario.
- Desde la página de detalles del cuestionario, hacer click en el nombre de la pregunta a la que se quiere acceder.
- Desde la página de detalles de una pregunta, hacer click en Add answer, en la última fila de la tabla.
- Rellenar el campo Answer con el texto de la respuesta, y marcar si la respuesta es correcta o no en la casilla Correct.
El máximo número de respuestas a una pregunta es de 4. El botón de Add answer no se mostrará si se alcanza este número de respuestas.
El máximo número de respuestas correctas es 1.
- Para finalizar la creación de la respuesta, hacer click en el botón verde Submit. Si se quiere cancelar la creación, hacer click en el botón rojo Cancel. Cualquier error en la creación se mostrará en el formulario.
- Tras una creación exitosa, se redirigirá al usuario a la página de detalles de la pregunta.
- Desde la página de detalles de una pregunta, hacer click en el botón con borde amarillo Edit correspondiente a la respuesta que se desea editar.
- Modificar los campos que se deseen.
- Para guardar las modificaciones de la respuesta, hacer click en el botón verde Submit. Si se quieren cancelar, hacer click en el botón rojo Cancel. Cualquier error en la modificación se mostrará en el formulario.
- Tras una modificación exitosa, se redirigirá al usuario a la página de detalles de una pregunta.
- Desde la página de detalles de una pregunta, hacer click en el botón con borde rojo Delete correspondiente a la respuesta que se desea borrar.
- Se mostrará una página de confirmación, donde se debe pulsar el botón verde Confirm para confirmar la elección, o el botón rojo Cancel para volver atrás.
- Tras borrar la respuesta de forma exitosa, se redirigirá al usuario a la página de detalles de la pregunta.
Para crear un juego es necesario haber creado antes un cuestionario. Para una mejor experiencia, se recomienda que todas las preguntas de este tengan definidas las 4 respuestas, además de tener marcada la respuesta correcta. Aún así, la plataforma soporta preguntas con menor número de respuestas, o preguntas sin respuesta correcta.
- Desde la página de detalles del cuestionario, hacer click en el botón verde Play.
- Se redirigirá a la página de juego, donde se dispondrá del código numérico (o pin) asociado al juego, además de la URL y el QR para conectarse como participante. También se mostrará un listado con los participantes que se vayan uniendo. Este listado se actualizará en tiempo real.
Es muy importante no actualizar esta página, ya que el código del juego cambiaría y se perderían todos los participantes, obligando a todos a unirse de nuevo.
Para poder unirse a un juego es necesario haberlo creado antes.
Sólo se podrán unir participantes mientras el juego no haya comenzado.
El nombre o alias de los participantes es único.
- Introducir el enlace https://psi-p4-vue.onrender.com en el navegador
- Rellenar los campos con el alias que se desee y el pin del juego.
- Hacer click en el botón verde Join Game.
- Se redigirá al usuario a una página de espera, que se actualizará automáticamente cuando el juego comience.
- Escanear el QR que se muestra en la pantalla del juego
- Rellenar el campo alias con el nombre que se desee.
Nótese que el pin del juego se rellena automáticamente.
- Hacer click en el botón verde Join Game.
- Se redigirá al usuario a una página de espera, que se actualizará automáticamente cuando el juego comience.
- Tras haber creado un juego, cuando el número de participantes sea el deseado se podrá iniciar el juego pulsando el botón verde Launch Game.
Cabe destacar que, tras hacer click en Launch Game, las páginas pueden ser actualizadas, y las cuentas atrás de las preguntas no se verán afectadas.
- Se mostrará una cuenta atrás de 5 segundos.
- Tras la cuenta atrás, se mostrarán la primera pregunta y las respuestas correspondientes. Cada una de las respuestas tendrá asociada un color y un símbolo. También se mostrará el tiempo restante para responder a la pregunta.
- Cuando pase el tiempo destinado a dicha pregunta, se resaltará la respuesta, y se mostrarán las puntuaciones de los participantes.
Para pasar a la siguiente pregunta, pulsar el botón verde Next question. Si la pregunta que se muestra es la última, el botón será verde, pero dirá Show Leaderboard. 
- El proceso se repite hasta que no queden más preguntas, en cuyo caso se mostrarán las puntuaciones de todos y el ranking final.
- Tras haberse unido a un juego, se esperará hasta que el juego se inicie en la pantalla de espera
- Una vez se inicie el juego, se mostrarán tantos botones como respuestas tenga la pregunta que se muestra en la pantalla principal. Estos botones tendrán asociados los mismos colores y símbolos que la respuesta a la que corresponden.
- Se podrá pulsar uno de estos botones antes de que se acabe el tiempo de la pregunta. Si la respuesta ha sido registrada adecuadamente, se mostrará el texto Answer registered. Sino, se mostrará el error correspondiente.
- Cuando el creador del juego pase a la siguiente pregunta, la página se recargará automáticamente, repitiendo el proceso.
- Al finalizar el juego, se redirigirá a los jugadores a la pantalla para unirse a un juego.