Convierte la asignación de asientos del salón en un juego en línea: Seat Stealer

Contexto

• Empezó como un proyecto personal cuando estaba en preparatoria, porque quería convertir la tediosa y aburrida asignación de asientos en algo divertido
• La idea era que los estudiantes participaran directamente desde sus propios dispositivos y compitieran por los asientos que querían
• En ese momento la lista de estudiantes estaba hardcodeada y el código terminó siendo un completo espagueti, pero aun así salió un resultado bastante convincente
• Nunca voy a olvidar el primer día que lo mostré, después de pedirle permiso al profesor titular. La reacción fue increíble y el proyecto terminó usándose durante todo el año

Reconstrucción

• Después de graduarme, la escuela se puso en contacto conmigo. Me pidieron adaptar este programa para el grupo actual.
• Pero el código estaba demasiado enredado, y como la lista de estudiantes y la distribución de asientos estaban hardcodeadas, decidí reconstruirlo para convertirlo en un proyecto mantenible
• Estructura
  • Backend: como todos los datos de los estudiantes se procesan en el cliente, el backend solo funciona como una especie de "servidor de juego" que entrega datos.
    • Node.JS
    • Socket.IO
  • Frontend - admin: administra todos los datos de los estudiantes y coordina el progreso general del juego. Esta pantalla fue diseñada asumiendo que se proyectará en una TV.
    • SvelteKit
    • Socket.IO
  • Frontend - estudiantes: se conectan con el admin a través del backend para intercambiar datos.
    • SvelteKit
    • Socket.IO
• Se incorporó un editor con una UI amigable para poder modificar fácilmente la distribución de asientos y la lista de estudiantes.

Escenario

1. En la página de admin se inicia la "asignación de asientos en línea" y se sube el archivo con los datos de los estudiantes; entonces se crea una nueva "sala" y aparece un código QR al que los estudiantes pueden conectarse.
2. Los estudiantes escanean el código QR con sus dispositivos para entrar al juego. Desde la página de admin se puede revisar y gestionar el estado de conexión de los estudiantes.
3. Cuando se inicia el juego desde la página de admin, en la página de estudiantes aparece la pantalla de "selección de asiento". Los votos por el asiento deseado se registran en la página de admin.
4. Cuando todos los estudiantes terminan de votar, la página de admin muestra los resultados.
5. Los estudiantes que eligieron el mismo asiento hacen en ese momento un juego sencillo
   • Piedra, papel o tijera, dados, minijuegos, etc.; queda a criterio del profesor
6. El estudiante que gana el juego se queda con ese asiento.
7. Se repite hasta que todos los estudiantes tengan un asiento asignado.

Comentarios finales

• Para dejar claro de forma transparente que los datos de los estudiantes no se recopilan ni se utilizan, el proyecto fue publicado como open source.
• Como está diseñado pensando en su uso dentro de una escuela, lo más difícil fue prepararlo para responder a todo tipo de situaciones excepcionales.
  • Si un estudiante pierde la conexión a mitad del juego, se intenta reconectar y, si eso falla, puede retomar el proceso al volver a entrar.
  • Si un estudiante está ausente, el juego puede continuar sin su participación.
  • Si un estudiante llega tarde, puede entrar incluso con el juego ya comenzado.
  • Si alguien suplanta la identidad de otro estudiante, se le puede expulsar.
• Para que pudiera usarse también en distintos grupos, se creó una guía de uso amigable y se publicó en YouTube.
  • https://youtu.be/C4ezwIrIfjc
• Como todavía es temporada de vacaciones, aún no he podido ver el resultado del proyecto, así que terminó convirtiéndose en una razón para esperar el semestre de primavera, algo que nunca antes me había pasado.
• Si conoces a algún docente, te agradecería que se lo compartieras. Gracias.

[seoulrain]

En Chrome, aunque agrego nombres de estudiantes, el contador no aumenta.

[2147483647]

Como puede ser incómodo escribir todos los nombres, estaría bien poder cambiarlo para usar solo números.

[joon14]

Está lindo jajaja
Aunque sí se ven algunos puntos pequeños por corregir, voy a compartirlo con docentes cercanos.

[geeksk553]

¡Qué idea tan divertida!