Creación de informes de progreso estudiantil en JavaScript

La posibilidad de ver los informes de progreso de los estudiantes en línea ofrece numerosos beneficios tanto para los padres como para los educadores. El acceso en línea brinda a los padres y estudiantes información en tiempo real sobre el desempeño académico del estudiante, lo que les permite mantenerse informados y comprometidos con su educación. Pueden seguir fácilmente el progreso, monitorear la asistencia, ver calificaciones e identificar áreas donde se puede necesitar apoyo adicional.

Para los educadores, los informes de progreso en línea agilizan el proceso de presentación de informes, facilitando la generación y el intercambio de evaluaciones integrales del desempeño de los estudiantes. Permite a los profesores comunicarse más eficazmente con los padres, fomentando la colaboración y permitiendo intervenciones específicas. En general, el acceso en línea a los informes de progreso de los estudiantes mejora la comunicación, promueve la responsabilidad y respalda un enfoque proactivo para el éxito de los estudiantes.

Afortunadamente, ActiveReportsJS facilita a los educadores la creación y personalización de estos informes de progreso y facilita su visualización en aplicaciones web. Este artículo le mostrará cómo utilizar el Diseñador de informes ActiveReportsJS para crear un informe de progreso y utilizar el Visor de informes para mostrar su informe en una aplicación JavaScript.

Descripción general del contenido

• Conexión de datos al informe

• Creación del encabezado y pie de página del informe de progreso

• Mostrar información del estudiante

• Elaboración del resumen del GPA y la tabla de progreso académico

• Creación de la tabla de progreso de comportamiento y actitud

• Crear la tabla de asistencia

• Agregar ActiveReportsJS a una aplicación JavaScript

  
  

Si desea seguir el artículo, puede encontrar el informe completo y la solicitud aquí .

Conexión de datos al informe

Para los fines de este artículo, utilizaremos el diseñador independiente incluido en la descarga de ActiveReportsJS. Después de instalar e iniciar el diseñador, podremos ver nuestro informe vacío. Antes de comenzar a agregar controles al informe, queremos asegurarnos de vincular los datos que usaremos con el informe.

En la parte superior derecha del diseñador, seleccione el panel Datos . Esto abrirá la pantalla de nuestras Fuentes de datos , Conjuntos de datos y Parámetros :

Para comenzar, necesitaremos una fuente de datos. Haga clic en el botón Agregar en la sección Fuentes de datos para abrir la ventana Fuentes de datos:

Desde aquí, podemos indicarle al informe dónde buscar los datos. Tenemos dos opciones respecto de dónde pueden venir los datos: JSON remoto o JSON integrado . JSON remoto requiere que proporcione la URL a un punto final de API, mientras que JSON integrado le permite seleccionar un archivo JSON para cargar datos directamente en el informe.

Para este informe, usaremos JSON integrado para cargar varios archivos JSON ; Tenemos archivos para información, calificaciones, comportamiento y asistencia de los estudiantes, por lo que necesitaremos crear una fuente de datos para cada uno de estos archivos.

Cuando esté completo, debería verse así:

Ahora que hemos configurado nuestras cuatro fuentes de datos, es hora de crear un conjunto de datos para cada una. Para crear un conjunto de datos para una fuente de datos, simplemente haga clic en el ícono Más al lado de la fuente de datos que desea usar; Esto abrirá la ventana Conjunto de datos:

Dado que utilizamos JSON integrado, todo lo que debemos proporcionar es una ruta JSON; esto le dice al informe qué datos queremos recuperar del JSON. En este caso, queremos recuperar todo el JSON, por lo que usamos la ruta $.* . Esto le indica al informe que obtenga todos los datos disponibles.

Una vez que la ruta JSON esté ingresada, presione el botón Validar para confirmar que su conjunto de datos puede recuperar los datos solicitados.

Si todo funciona correctamente, el campo Campos de la base de datos ahora debería estar poblado con valores de nuestros datos:

Una vez que configuramos un conjunto de datos para cada fuente de datos, nuestro panel de datos debería verse así:

¡Y eso es! Ahora tenemos datos conectados a nuestro informe a los que podemos hacer referencia en los controles. En la siguiente sección, comenzaremos a desarrollar las diferentes secciones del informe, comenzando con el encabezado y el pie de página.

Creación del encabezado y pie de página del informe de progreso

Podemos comenzar a crear los elementos del informe ahora que se han configurado los datos. Para comenzar, crearemos un encabezado y pie de página para las páginas de nuestro informe. En la barra de herramientas, seleccione la pestaña Secciones y haga clic en los botones Agregar encabezado y Agregar pie de página :

Esto agregará secciones de encabezado y pie de página al informe. Queremos agregar dos controles de la Caja de herramientas de control en la sección del encabezado. Haga clic en el botón de hamburguesa en la parte superior izquierda del diseñador para expandir la caja de herramientas y luego arrastre un cuadro de texto y un control de imagen al encabezado de la página.

Dentro del TextBox, estableceremos su valor en "Informe de progreso del estudiante".

Luego, incrustaremos una imagen en el informe para el control Imagen. Seleccione el control Imagen y luego expanda el menú desplegable Imagen en la sección Apariencia de sus propiedades. Para incrustar una imagen, haga clic en el botón Incrustado y luego haga clic en **Cargar...** para abrir el explorador de archivos y seleccionar la imagen que desea cargar:

Ahora que nuestra imagen está cargada y nuestro texto está configurado, simplemente cambiaremos un poco el tamaño y el estilo a través del panel Propiedades. Cuando esté completa, nuestra sección de encabezado se verá así:

Ahora es el momento de crear el pie de página. En nuestro pie de página, querremos incluir 3 cuadros de texto: dos con información de contacto y uno para mostrar el año actual. Junto a cada cuadro que contiene información de contacto, también queremos incluir un ícono de un teléfono para indicar que se trata de números de teléfono.

Arrastre tres controles TextBox y dos controles Image al área del pie de página de la página. Seguiremos los mismos pasos descritos anteriormente para configurar las imágenes.

Para dos de los controles TextBox, simplemente ingresaremos algunos números de teléfono que se pueden usar para contactar al propietario del informe, pero para el tercero, usaremos una expresión para que siempre muestre el año actual.

Dentro de este tercer cuadro de texto, coloque este valor: © {Year(Now())} GrapeCity, Inc. Todos los derechos reservados. Puedes ver dentro de la cadena que hemos incluido llaves, y dentro de las llaves, la expresión Year(Now()) ; esto devolverá el año actual y el informe sabe evaluar esto como una expresión porque lo hemos colocado entre llaves.

Después de darle un poco de estilo, el pie de página debería verse así:

Podemos obtener una vista previa del informe para ver cómo se evalúa la expresión que hemos creado:

Ahora que hemos creado el encabezado y el pie de página, se mostrarán en cada página del informe. En la siguiente sección, agregaremos algunos de los datos que hemos cargado mostrando información básica sobre el estudiante.

Mostrar información del estudiante

Ahora es el momento de empezar a incorporar algunos de los datos que está cargando el informe. Primero, arrastre un control TextBox y Container al cuerpo del informe. Expanda ambos para que extiendan la mayor parte del ancho de la página y, dentro del control TextBox, incluya el texto "Información del estudiante":

Usaremos este Contenedor para contener toda la información asociada con el estudiante.

Ahora, colocaremos TextBoxes dentro del Contenedor; estos se utilizarán tanto para etiquetas como para contener información de los conjuntos de datos.

Configure el contenedor para que coincida con lo siguiente:

Ahora, dentro de cada uno de los cuadros de texto vacíos, querremos incluir expresiones que recuperen datos de nuestro conjunto de datos de información de los estudiantes.

Incluya el siguiente texto en los cuadros de texto asociados:

Cuando esté completo, debería poder obtener una vista previa del informe y ver lo siguiente:

Elaboración del resumen del GPA y la tabla de progreso académico

A continuación, mostraremos información relacionada con las calificaciones del estudiante.

Primero, crearemos la sección Resumen de GPA; Como en la sección anterior, arrastre un control TextBox y Container al informe. Expanda ambos para que extiendan la mayor parte del ancho de la página y, dentro del control TextBox, incluya el texto "Resumen de GPA":

Dentro de este Contenedor, queremos mostrar el GPA general del estudiante, así como su percentil.

Arrastre cuatro cuadros de texto al contenedor y configúrelos como tales:

A continuación, necesitaremos configurar algunas expresiones más dentro de los cuadros de texto vacíos:

La expresión GPA general calculará el percentil en el que se encuentran y luego, en base a eso, proporcionará un valor de GPA numérico asociado. La expresión percentil simplemente calcula su calificación en función de un porcentaje.

Cuando esté completo, debería poder ver lo siguiente al obtener una vista previa del informe:

Ahora que hemos creado el resumen, es hora de mostrar un desglose del progreso del estudiante por materia. Debajo de la sección Resumen de GPA, arrastre un cuadro de texto y un control de tabla al cuerpo del informe. Dentro del TextBox, incluya el texto “Progreso Académico”, mientras que dentro de la tabla, incluya los siguientes encabezados de columna:

• Sujeto
• Maestro
• Trimestre 1
• Trimestre 2
• Trimestre 3

Cuando esté completo, debería verse así:

Lo siguiente que debemos hacer es asociar el conjunto de datos correcto con la tabla. Seleccione el control Tabla y luego, dentro del panel Propiedades, configure el menú desplegable Nombre del conjunto de datos para usar el conjunto de datos de marca . Ahora podemos hacer referencia a datos de este conjunto de datos dentro de la tabla.

Complete el resto de la tabla como tal:

Después de un poco de estilo adicional, el control Tabla ahora tiene el siguiente aspecto:

Cuando obtengamos una vista previa de nuestro informe, la tabla debería verse así:

Agregar la tabla de progreso de comportamiento y actitud

Ahora que los usuarios pueden ver su progreso académico, es hora de que agreguemos una sección que muestre las calificaciones del maestro sobre el progreso conductual y actitudinal del estudiante. Antes de hacer esto, agregaremos una nueva sección a nuestro informe. En la parte inferior del diseñador de informes, verá un botón Agregar sección ; presione esto y agregará una nueva página/sección continua a su informe:

Ahora, debajo del encabezado de esta nueva sección, agregue un control TextBox, un control Container y tres controles TextBox dentro del control Container:

Como puede ver, hemos completado estos cuadros de texto con nuestro propio texto. Antes de agregar los controles Tablix, queremos hacer una modificación más.

En estas tablas, queremos usar íconos para mostrar dónde se ubica el estudiante en términos de Excelente , Satisfactorio y Necesita mejorar . Usaremos íconos verdes, amarillos y rojos. Para agregarlos, agregue los siguientes valores a la propiedad Imagen del cuadro de texto asociado:

Ahora, si obtenemos una vista previa del informe, deberíamos ver lo siguiente:

Ahora que el contenedor Tablix está configurado, es hora de agregar los controles Tablix para mostrar los datos de progreso de comportamiento y actitud. Arrastre un control Tablix a este contenedor; Verá aparecer el Asistente Tablix en la ventana del diseñador:

El Asistente Tablix es una herramienta extremadamente poderosa para crear un control Tablix (o tabla dinámica, como también se la conoce), que puede mostrar datos de maneras más dinámicas que una tabla estándar.

Usaremos datos del conjunto de datos de comportamiento que creamos al principio del artículo. Expanda este conjunto de datos y luego arrastre y suelte el valor BehavioralMeasure en la sección Grupos de filas del asistente, y arrastre y suelte los valores T1 , T2 y T3 en la sección Valores del asistente. Asegúrese de cambiar los valores agregados para T1, T2 y T3 de Count a Ninguno .

Antes de terminar, haga clic en el botón Filtros del asistente; Necesitamos configurar un filtro para esta tabla. Aquí, haga clic en el botón Agregar para agregar un nuevo filtro. Establezca el primer cuadro en el campo Tipo del conjunto de datos y configure el filtro para buscar la cadena "Hábito de trabajo":

Cuando haya terminado, puede presionar el botón Aceptar y ver cómo se ve su Tablix en este punto:

Ahora, al igual que con los cuadros de texto Excelente Satisfactorio y Necesita mejorar , actualizaremos las celdas de datos de las columnas T1, T2 y T3 para mostrar los íconos en lugar de los valores de texto. Para cada una de estas celdas de datos, elimine el valor del texto y actualice la propiedad Imagen del cuadro de texto asociado:

Esto hará que el control Tablix coloque el icono de semáforo correcto en la celda según el valor de la celda. Después de algunas actualizaciones de estilo, nuestro primer Tablix debería verse así:

Cuando obtengamos una vista previa del informe, Tablix debería verse así:

Ahora, necesitamos crear el segundo control Tablix para mostrar información de actitud. Lo bueno es que este Tablix es casi idéntico al que acabamos de crear. Copie y pegue el primer Tablix que creamos y luego colóquelo en el contenedor justo debajo del otro Tablix. Luego, actualice la primera celda del encabezado de "Hábitos laborales" a "Cumplimiento del código de conducta".

Finalmente, seleccione el segundo control Tablix y haga clic en el ícono de ajustes en la parte superior derecha del control; esto volverá a abrir el asistente de Tablix. Haga clic en el botón Filtros ; vamos a modificar el filtro que estamos usando actualmente.

Actualice el valor del texto del filtro de "Hábitos de trabajo" a "Conducta en el aula". Ahora, la sección Progreso de comportamiento y actitud debería verse así:

Cuando obtengamos una vista previa del informe, la sección Progreso de comportamiento y actitud debería tener el siguiente aspecto:

Agregar la pestaña de asistencia

La sección final que agregaremos a nuestro informe mostrará la asistencia del estudiante. Arrastre un control TextBox y un control Tablix al informe y colóquelos debajo de la sección Progreso de comportamiento y actitud.

Dentro del asistente de Tablix, usaremos el conjunto de datos de asistencia ; arrastre el valor de Días a la sección Grupos de filas del asistente y arrastre los valores T1 , T2 y T3 a la sección Valores del asistente.

Además, asegúrese de establecer los valores agregados para T1 , T2 y T3 en Suma :

Ahora, la sección Asistencia debería verse así:

Y cuando obtengamos una vista previa del informe, debería verse de la siguiente manera:

Ahora, con el informe completo, cuando obtengamos una vista previa del informe, las páginas deberían verse así:

Agregar ActiveReportsJS a una aplicación JavaScript

Ahora que hemos creado nuestro informe de progreso del estudiante, es hora de agregar el Visor de informes ActiveReportsJS a una aplicación JavaScript para que podamos ver el informe en el navegador. Cree un nuevo archivo llamado index.html y ábralo en el IDE de su elección.

Vamos a agregar el siguiente código al archivo:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Student Progress Report</title> <meta name="description" content="ARJS Report viewer" /> <meta name="author" content="GrapeCity" /> </head> <body></body> </html>

Ahora que el archivo HTML está configurado, es hora de agregar ActiveReportsJS al archivo. Para ello, utilizaremos la CDN para cargar los archivos necesarios.

Dentro de la etiqueta <head> , agregue el siguiente código:

 <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

Las dos primeras líneas de código cargan los archivos CSS necesarios: el archivo CSS principal y el archivo CSS del visor. Luego, cargamos el archivo JavaScript principal y el archivo JavaScript del visor. Finalmente, cargamos un archivo PDF, datos tabulares y HTML JavaScript; Estos archivos brindan a los usuarios la posibilidad de exportar el informe en los tipos de archivo respectivos.

Si no desea permitir que los usuarios exporten el informe en un formato específico, todo lo que necesita hacer es excluir la etiqueta <script> asociada y los usuarios no podrán exportar en ese tipo de archivo.

A continuación, agregaremos algunos estilos básicos a los elementos de la página. Dentro de la etiqueta <head> , debajo de las etiquetas de script que acabamos de agregar, agregue el siguiente código:

 <style> body { margin: 0; } #viewer-host { width: 100%; height: 100vh; } </style>

Esto eliminará los márgenes del elemento del cuerpo y también establecerá el ancho y alto del elemento con el ID de espectador-host .

Ahora, dentro de la etiqueta <body> , agrega el siguiente elemento:

 <div id="viewer-host"></div>

Le hemos dado a este div el ID de espectador-host ; esto significará que recibirá los estilos CSS que configuramos anteriormente, pero también nos permitirá vincular el Visor de informes de JavaScript al div.

Finalmente, debajo del div, agrega el siguiente código:

 <script> var viewer = new ActiveReports.Viewer("#viewer-host"); viewer.open("StudentProgressReport.rdlx-json"); </script>

Este JavaScript creará un nuevo visor ActiveReportsJS, asociándolo con el elemento con el ID visor-host . Luego, llamamos al método abierto del visor y le pasamos el nombre de nuestro informe.

Lo último de lo que debe estar seguro es de colocar el informe en la misma carpeta que su archivo index.html; Si no lo hace, asegúrese de señalar la ubicación correcta de su informe.

Lo único que queda es ejecutar la aplicación. Puede utilizar cualquier servidor web estático para ejecutar la aplicación; Como usamos Visual Studio Code, usamos la extensión Live Server para activar rápidamente un servidor web estático. Al abrir la aplicación en su navegador, debería ver lo siguiente:

Conclusión

¡Y eso es todo! Como puede ver, ActiveReportsJS facilita la creación de informes de progreso personalizados, lo que permite a los profesores y estudiantes realizar un seguimiento del progreso del estudiante a lo largo del año escolar.

Si desea descargar el informe y la aplicación creados en este artículo, puede encontrar el repositorio aquí .

¡Feliz codificación!