Incluir información como sigla, nombre, descripción, etc.

Introducción

Las presentaciones deben incluir formas de "interactividad" tipo formulario con preguntas de comprensión de la materia. Ejemplos similares:

• Cuestionarios de Zoom
• Kahoot!
• Nearpod
• Google Forms

Excepto Zoom, Kahoot! y Nearpod tienen una interfaz gráfica muy desarrollada para ese tipo de interacción.

Google Forms

Google Forms tiene los siguientes tipos de preguntas (entre paréntesis su equivalente HTML):

• Respuesta corta (text)
• Párrafo (textarea)
• Varias opciones (radio)
• Casillas (option)
• Desplegable (select)
• Escala lineal (un arreglo unidimensional de radio)
• Cuadrícula de varias opciones (un arreglo bidimensional de radio)
• Cuadrícula de casillas (un arreglo bidimensional de option)
• Fecha (date)
• Hora (time)

Nearpod

Nearpod tiene las siguientes categorías de diapositivas:

Interactivo

• Video (fácil de integrar con HTML)
• Contenido web (sin problema de integración)
• Video de la BBC
• Nearpod 3D (algunos objetos tridimensionales predefinidos, en nuestro caso podríamos tener animaciones interactivas de gráficas matemáticas a partir de Bokeh, Matplotlib, etc.)
• Simulación PhET (integración con simulaciones interactivas de ciencias y matemáticas de PhET, podríamos evaluar posibilidad de integración también)
• Field Trip virtual (animación de realidad virtual)

Cuestionarios y juegos

• Quiz (opción múltiple como opciones o casillas)
• Draw it (dibujo a mano alzada)
• Rellena los espacios (drag and drop de palabras en un texto)
• Memory test (juego de pares en cartas, como este en JavaScript)
• Time to Climb (tipo competencia con animación)
• Matching pairs (parecido al juego de cartas pero que une texto con imágenes)

Debates

• Collaborate Board (un panel multimedia para colocar cosas)
• Flip (integración con Flip)
• Poll (recopilación de opiniones, que no es bueno/malo)
• Open Ended Questions (respuesta escrita)

Parece que muchas de estas opciones son posibles de integrar. El énfasis por ahora será en HTML "vainilla".

Modelos

Para crear una interfaz de creación de preguntas necesitamos los siguientes modelos:

Question

La descripción de la pregunta, incluyendo multimedia.

• question_id
• title (CharField): título del problema
• description (TextField): enunciado del problema en Markdown, incluyendo ecuaciones, links, etc. Podría ser útil un editor de Markdown para Django o un editor más robusto como Tiny.
• image (ImageField): una imagen ilustrativa del problema (opcional)
• data (FileField): un archivo con datos para el problema (opcional)
• form_type (CharField): el tipo de pregunta: selección única, texto, etc.
• question_set (IntegerField): el conjunto de preguntas dentro de la presentación
• topic (ForeignKey): un tema de la lista de temas (tabla Topic)

Choice

Cuando aplica, la pregunta puede tener distintas opciones, como en selección múltiple.

• choice_id
• question_id
• text
• is_correct

Answer

Donde se almacenan las respuestas históricas de los usuarios.

• answer_id
• question_id
• user_id
• choice_id

Topic

Lista "oficial" de los temas del curso

• topic_id (CharField): clasificación alfanumérica del tema
• name (CharField): nombre del tema

Diagrama

erDiagram
    Deck ||--o{ Question : has
    Question ||--o{ Choice : offers
    Question ||--o{ Topic : "related to"
    Answer }o--|| Question : "given to"
    User ||--o{ Answer : provides

Tareas

• Crear modelos
• Crear plataforma de creación de preguntas
• Habilitar espacio dentro de presentaciones
• Crear patrón de pregunta
• Editar CSS para configurar preguntas
• Integrar con programación para hacer preguntas programadas revisadas automáticamente

Actualmente la autenticación es con nombre de usuario (username) y contraseña, sin embargo, mejor que sea con correo institucional (@ucr.ac.cr) y contraseña, y así para hacer el inicio de sesión.

Opcional: utilizar tanto el correo completo ([email protected]) o solamente el maria.rodriguez y automáticamente se agrega el @ucr.ac.cr.

Porque sí.

Shiny es una plataforma de Posit (ex-RStudio) para crear gráficas interactivas en web. ¿Hasta qué punto es posible integrar con Django para usar en las presentaciones?

Hace cosas similares a las que hace Bokeh (que ya tiene integración con PyScript, ventaja para Bokeh) y además tiene buen respaldo y perspectivas de evolución.

Quizá la pregunta más general es: ¿cuál plataforma de graficación interactiva podemos usar? Candidatos hasta ahora:

• Bokeh
• Shiny
• Matplotlib

Nota: esto es para crear gráficas que ya están incrustadas en la presentación y con las cuales interactúan los estudiantes (modificación de parámetros, por ejemplo), no es para ser editadas por ellos, como en los otros escenarios con PyScript, en donde es un ejercicio de programación.

Shiny, Bokeh, Matplotlib >>> visualización
PyScript + Matplotlib, etc. >>> programación

Criterios de selección:

• Compatibilidad con Django y Reveal.js
• Facilidad de edición
• Herramientas
• Documentación
• Comunidad
• Que sea más bonito y chiva

Importante hacer pruebas.

Para esto hay que encontrar la forma de guardar el HTML de Reveal.js de la presentación en la base de datos y que luego Django lo renderice.

Tomar en cuenta la forma más fácil de hacer ediciones de la presentación localmente para luego "subirlas" al sistema.

Otras cosas para tomar en cuenta:

• Archivos multimedia

Dentro de la presentación, en todo momento debe mostrarse una pequeña barra de herramientas o links arriba a la derecha (u otra parte) para navegar el documento o para regresar a la página de inicio, o para instrucciones básicas de Reveal.

Para colocar imágenes SVG y todo lo demás.

Para nuestro proyecto requerimos:

• Identidad visual de la UCR (colores, tipografías, etc.)
• Más contenido por cada diapositiva. Motivo: Reveal.js es para presentaciones en proyector mientras que nuestras presentaciones serán en pantalla personal en un navegador (tampoco tan pequeño porque puede ser visto en celular).
• Barra de herramientas o menú "flotante" en una esquina para tener acceso al resto del sitio y opciones para el usuario registrado, etc.
• Otras cosas configurables: citas (blockquote), ecuaciones, fragmentos de código, imágenes, etc.
• Logo en alguna parte de la diapositiva

Entonces, es necesario editar los archivos CSS descargados de Reveal.js, específicamente, crear un tema ucr.css dentro de /reveal/dist/theme/.

TikZJax convierte elementos <script> de JavaScript en una página web con código de PGF/TikZ a imágenes SVG.

Ver demostración. Su desarrollo está detenido.

Esto podría ser una herramienta útil para las presentaciones porque las gráficas de las presentaciones del curso están hechas en TikZ o variantes, y podría habilitar traslados rápidos (aunque no óptimos) del material que ya existe.

Esta debería ser solo una de las herramientas de creación de gráficas, junto con las otras herramientas nativas de Python y de JavaScript/HTML/CSS.

Este sistema está dirigido a personas estudiantes de la UCR, específicamente matriculados en el curso IE0405 - MPSS, por lo tanto, el registro en el sistema es exclusivo para ellos, a partir de la información oficial institucional (correo, nombre, etc.).

Por lo tanto, el proceso de registro no está abierto a cualquier usuario, sino que lo harán los administradores del curso para cada nuevo semestre.

Buena parte del material estará disponible para cualquier visitante (por ejemplo, el material de clase), sin embargo, solo los usuarios registrados tendrán estadísticas de participación, etc., y algunas otras restricciones (por ejemplo, acceso a una videconferencia sincrónica).

Por lo tanto, el formulario de registro debe ser un sitio accesible solamente desde la sesión de un administrador.

Al público solo se muestra el botón de inicio de sesión y quizá una nota de que el ingreso es por invitación.

Sí.

Yes.

Crear una página de inicio para registro de participantes e información general.

Nota: utilizar la plantilla de Bootstrap.

Alternativas para el método de edición de cada presentación

Actualmente, cada presentación será editada directamente en HTML, debido a la ausencia de un editor WYSIWYG para Reveal.js dentro de nuestro sistema (descartado para esta etapa del proyecto). Además, la generación de gráficas, simulaciones y otras tareas en Python son hechas por aparte y luego exportadas e incrustadas en el HTML, de alguna forma. Es decir, son dos procesos separados difíciles de integrar en un solo flujo.

Modelo de edición de Streamlit

Streamlit es una plataforma (poderosa) de creación de aplicaciones web desde Python, de código abierto, que convierte un documento de Python (con todas sus posibilidades) en un sitio HTML donde puede mostrar resultados como: DataFrames, gráficas, y casi cualquier cosa con su API.

Tiene, además, todas las opciones de edición de formato clásicas de texto: títulos, LaTeX, Markdown, etc., y aplicaciones de terceros para lienzos editables, etc.

Esta es, por mucho, la herramienta más poderosa para generar aplicaciones web desde Python. Su API es maduro y bien estructurado y mantenido.

Sabiendo esto, es posible imaginar que la plataforma de presentaciones sea una especie de envoltura que da formato de presentaciones (Reveal.js) a la edición que se hace en el documento de Python con la instrumentación de Streamlit.

El problema en ese caso para ser de cambiar radicalmente el tema de la aplicación web generada, más toda la integración con el backend en Django.

Modelo de edición de Manim

Manim (An animation engine for explanatory math videos) es también una herramienta poderosa, y aunque el producto es diferente, un video, su proceso de creación tiene algunas similitudes, específicamente que hay un código fuente en Python donde modela textos y animaciones.

Manim es también de código abierto y puede ser integrado de otras formas en el proyecto.

Pero calma, paso a paso con el modelo de edición

Antes de tratar de integrar Streamlit es posible encontrar inspiración en su modelo:

flowchart LR
    A[Código fuente de Python] 
    B[Servidor]
    C(Sitio web)
    A --> B --> C

Para nosotros también tiene sentido porque unifica la edición del contenido del sitio en un código fuente de Python, incluyendo textos, simulaciones, animaciones y otros.

Posibilidades previstas

Es importante explorar más estos modelos de edición, porque podrían ser realmente un camino más estable de edición de presentaciones y de aumento de las posibilidades de despliegue de contenido.

Entonces, tareas:

• Averiguar si es posible, como primera posibilidad, incrustar contenido de Streamlit en otros sitios (dificultad baja, idoneidad baja)
• Evaluar si es posible modificar el código de Streamlit para darle nuestro formato y backend (dificultad alta, idoneidad alta)
• Crear nuestro propio "convertidor" de un código fuente en Python para editar todo el contenido (incluyendo gráficas, simulaciones, etc.) y generar la presentación (dificultad media, idoneidad media/alta)

¿Cuáles son los tipos de usuarios? Crear modelos para cada uno y reglas de acceso a los recursos de la plataforma.

Agregar las plantillas según está indicado en el documento MODELS.md.

Nota: observar lo de las plantillas de Django, tipo:

{% extends 'base.html' %}

{% begin block %}

{% begin block %}

etc.