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   . Esto abrirá la pantalla de nuestras   ,   y   :  Datos Fuentes de datos Conjuntos de datos Parámetros  Para comenzar, necesitaremos una fuente de datos. Haga clic en el botón   en la sección Fuentes de datos para abrir la ventana Fuentes de datos:  Agregar  Desde aquí, podemos indicarle al informe dónde buscar los datos. Tenemos dos opciones respecto de dónde pueden venir los datos:   o   . 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. JSON remoto JSON integrado  Para este informe, usaremos JSON integrado para cargar varios archivos   ; 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. JSON  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   al lado de la fuente de datos que desea usar; Esto abrirá la ventana Conjunto de datos:  Más  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. $.*    Si utiliza JSON remoto, también deberá proporcionar un valor de Uri/ruta; este valor se pasa del informe a la API para indicarle a la API qué datos devolver. Nota:  Una vez que la ruta JSON esté ingresada, presione el botón   para confirmar que su conjunto de datos puede recuperar los datos solicitados. Validar  Si todo funciona correctamente, el campo   ahora debería estar poblado con valores de nuestros datos:  Campos de la base de 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   y haga clic en los botones   y   :  Secciones Agregar encabezado 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   y un control   al encabezado de la página. cuadro de texto de imagen  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   y luego haga clic en **Cargar...** para abrir el explorador de archivos y seleccionar la imagen que desea cargar:  Incrustado  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:   Puedes ver dentro de la cadena que hemos incluido llaves, y dentro de las llaves, la expresión   ; esto devolverá el año actual y el informe sabe evaluar esto como una expresión porque lo hemos colocado entre llaves. © {Year(Now())} GrapeCity, Inc. Todos los derechos reservados. Year(Now())  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   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":  Container  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   . Ahora podemos hacer referencia a datos de este conjunto de datos dentro de la tabla. de marca  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   ; presione esto y agregará una nueva página/sección continua a su informe:  Agregar sección  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   ,   y   . Usaremos íconos verdes, amarillos y rojos. Para agregarlos, agregue los siguientes valores a la propiedad   del cuadro de texto asociado:  Excelente Satisfactorio Necesita mejorar Imagen  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   que creamos al principio del artículo. Expanda este conjunto de datos y luego arrastre y suelte el valor   en la sección   del asistente, y arrastre y suelte los valores   ,   y   en la sección   del asistente. Asegúrese de cambiar los valores agregados para T1, T2 y T3 de   a   . de comportamiento BehavioralMeasure Grupos de filas T1 T2 T3 Valores Count Ninguno  Antes de terminar, haga clic en el botón   del asistente; Necesitamos configurar un filtro para esta tabla. Aquí, haga clic en el botón   para agregar un nuevo filtro. Establezca el primer cuadro en el campo   del conjunto de datos y configure el filtro para buscar la cadena "Hábito de trabajo":  Filtros Agregar Tipo  Cuando haya terminado, puede presionar el botón   y ver cómo se ve su Tablix en este punto:  Aceptar  Ahora, al igual que con los cuadros de texto     y   , 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   del cuadro de texto asociado:  Excelente Satisfactorio Necesita mejorar Imagen  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   ; vamos a modificar el filtro que estamos usando actualmente. Filtros  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   ; arrastre el valor   a la sección   del asistente y arrastre los valores   ,   y   a la sección   del asistente. de asistencia de Días Grupos de filas T1 T2 T3 Valores  Además, asegúrese de establecer los valores agregados para   ,   y   en   :  T1 T2 T3 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   y ábralo en el   de su elección. index.html IDE  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   , agregue el siguiente código: <head>   <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   JavaScript; Estos archivos brindan a los usuarios la posibilidad de exportar el informe en los tipos de archivo respectivos. HTML  Si no desea permitir que los usuarios exporten el informe en un formato específico, todo lo que necesita hacer es excluir la etiqueta   asociada y los usuarios no podrán exportar en ese tipo de archivo. <script>  A continuación, agregaremos algunos estilos básicos a los elementos de la página. Dentro de la etiqueta   , debajo de las etiquetas de script que acabamos de agregar, agregue el siguiente código: <head>   <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   , agrega el siguiente elemento: <body>   <div id="viewer-host"></div>  Le hemos dado a este div el ID de   ; esto significará que recibirá los estilos CSS que configuramos anteriormente, pero también nos permitirá vincular el Visor de informes de JavaScript al div. espectador-host  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   . Luego, llamamos al método abierto del visor y le pasamos el nombre de nuestro informe. visor-host  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   para ejecutar la aplicación; Como usamos Visual Studio Code, usamos la extensión   para activar rápidamente un servidor web estático. Al abrir la aplicación en su navegador, debería ver lo siguiente:  servidor web estático Live Server  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!  También publicado  aquí.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Learn More About MESCIUS' Line of Products!

Este audio es producido en el idioma original de la historia!

Creación de informes de progreso estudiantil en JavaScript

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps