Création de rapports de progrès des étudiants en JavaScript

La possibilité de consulter les rapports de progrès des élèves en ligne offre de nombreux avantages tant aux parents qu'aux éducateurs. L'accès en ligne fournit aux parents et aux élèves des informations en temps réel sur les performances académiques de l'élève, leur permettant de rester informés et engagés dans leur éducation. Ils peuvent facilement suivre les progrès, contrôler l’assiduité, consulter les notes et identifier les domaines dans lesquels une aide supplémentaire peut être nécessaire.

Pour les enseignants, les rapports de progrès en ligne rationalisent le processus de reporting, facilitant ainsi la génération et le partage d'évaluations complètes des performances des élèves. Il permet aux enseignants de communiquer plus efficacement avec les parents, favorisant la collaboration et permettant des interventions ciblées. Dans l’ensemble, l’accès en ligne aux rapports de progrès des étudiants améliore la communication, favorise la responsabilité et soutient une approche proactive de la réussite des étudiants.

Heureusement, ActiveReportsJS permet aux enseignants de créer et de personnaliser facilement ces rapports de progression et de les visualiser facilement dans les applications Web. Cet article vous montrera comment utiliser le concepteur de rapports ActiveReportsJS pour créer un rapport de progression et utiliser la visionneuse de rapports pour afficher votre rapport dans une application JavaScript.

Aperçu du contenu

• Connexion des données au rapport

• Création de l'en-tête et du pied de page du rapport d'avancement

• Affichage des informations sur les étudiants

• Construire le résumé GPA et le tableau des progrès académiques

• Création du tableau de progression des comportements et des attitudes

• Création du tableau de présence

• Ajout d'ActiveReportsJS à une application JavaScript

  
  

Si vous souhaitez suivre l'article, vous pouvez trouver le rapport complété et la candidature ici .

Connexion des données au rapport

Pour les besoins de cet article, nous utiliserons le concepteur autonome inclus dans le téléchargement ActiveReportsJS. Après avoir installé et lancé le concepteur, nous pourrons voir notre rapport vide. Avant de commencer à ajouter des contrôles au rapport, nous devons nous assurer de relier les données que nous utiliserons au rapport.

En haut à droite du concepteur, sélectionnez le panneau Données . Cela fera apparaître l'affichage de nos sources de données , ensembles de données et paramètres :

Pour commencer, nous aurons besoin d’une source de données. Cliquez sur le bouton Ajouter dans la section Sources de données pour afficher la fenêtre Sources de données :

À partir de là, nous pouvons indiquer au rapport où rechercher les données. Nous avons deux options concernant l'origine des données : JSON distant ou JSON intégré . JSON distant nécessite que vous fournissiez l'URL d'un point de terminaison d'API, tandis que JSON intégré vous permet de sélectionner un fichier JSON à utiliser pour charger des données directement dans le rapport.

Pour ce rapport, nous utiliserons Embedded JSON pour charger plusieurs fichiers JSON ; nous avons des fichiers pour les informations sur les étudiants, les notes, le comportement et l'assiduité, nous devrons donc créer une source de données pour chacun de ces fichiers.

Une fois terminé, cela devrait ressembler à ceci :

Maintenant que nous avons configuré nos quatre sources de données, il est temps de créer un ensemble de données pour chacune. Pour créer un ensemble de données pour une source de données, cliquez simplement sur l'icône Plus à côté de la source de données que vous souhaitez utiliser ; cela fera apparaître la fenêtre Ensemble de données :

Puisque nous utilisons du JSON intégré, tout ce que nous devons fournir est un chemin JSON ; cela indique au rapport quelles données nous voulons récupérer du JSON. Dans ce cas, nous souhaitons récupérer l’intégralité du JSON, nous utilisons donc le chemin $.* . Cela indique au rapport d'obtenir toutes les données disponibles.

Une fois le chemin JSON entré, appuyez sur le bouton Valider pour confirmer que votre ensemble de données peut récupérer les données demandées.

Si tout fonctionne correctement, le champ Champs de base de données devrait maintenant être renseigné avec les valeurs de nos données :

Une fois que nous avons configuré un ensemble de données pour chaque source de données, notre panneau de données devrait ressembler à ceci :

Et c'est tout! Nous disposons désormais de données connectées à notre rapport que nous pouvons référencer dans les contrôles. Dans la section suivante, nous commencerons à créer les différentes sections du rapport, en commençant par l'en-tête et le pied de page.

Création de l'en-tête et du pied de page du rapport d'avancement

Nous pouvons commencer à créer les éléments du rapport maintenant que les données ont été configurées. Pour commencer, nous allons créer un en-tête et un pied de page pour les pages de notre rapport. Dans la barre d'outils, sélectionnez l'onglet Sections et cliquez sur les boutons Ajouter un en-tête et Ajouter un pied de page :

Cela ajoutera des sections d'en-tête et de pied de page au rapport. Nous souhaitons ajouter deux contrôles de la boîte à outils de contrôle dans la section d'en-tête. Cliquez sur le bouton hamburger en haut à gauche du concepteur pour développer la boîte à outils, puis faites glisser un contrôle TextBox et un contrôle Image dans l'en-tête de la page.

À l’intérieur de la TextBox, nous définirons sa valeur sur « Student Progress Report ».

Ensuite, nous intégrerons une image dans le rapport pour le champ Image. Sélectionnez le contrôle Image, puis développez la liste déroulante Image dans la section Apparence de ses propriétés. Pour intégrer une image, cliquez sur le bouton Intégré , puis cliquez sur **Charger…** pour ouvrir l'explorateur de fichiers et sélectionnez l'image que vous souhaitez charger :

Maintenant que notre image est chargée et que notre texte est défini, nous allons juste faire un peu de redimensionnement et de style via le panneau Propriétés. Une fois terminée, notre section d'en-tête ressemble à ceci :

Il est maintenant temps de créer le pied de page. Dans notre pied de page, nous souhaiterons inclure 3 TextBox : deux avec les informations de contact et une pour afficher l'année en cours. À côté de chaque case contenant des informations de contact, nous souhaitons également inclure une icône de téléphone pour signifier qu'il s'agit de numéros de téléphone.

Faites glisser trois contrôles TextBox et deux contrôles Image dans la zone de pied de page de la page. Nous suivrons les mêmes étapes décrites ci-dessus pour définir les images.

Pour deux des contrôles TextBox, nous allons simplement insérer des numéros de téléphone pouvant être utilisés pour contacter le propriétaire du rapport, mais pour le troisième, nous utiliserons une expression afin qu'elle affiche toujours l'année en cours.

À l'intérieur de cette troisième TextBox, placez cette valeur : © {Year(Now())} GrapeCity, Inc. Tous droits réservés. Vous pouvez voir à l'intérieur de la chaîne que nous avons inclus des accolades, et à l'intérieur des accolades, l'expression Year(Now()) ; cela renverra l'année en cours, et le rapport sait évaluer cela comme une expression car nous l'avons placé entre accolades.

Après avoir fait un peu de style, le pied de page devrait ressembler à ceci :

Nous pouvons prévisualiser le rapport pour voir comment l'expression que nous avons créée est évaluée :

Maintenant que nous avons créé l'en-tête et le pied de page, ils seront affichés sur chaque page du rapport. Dans la section suivante, nous ajouterons certaines des données que nous avons chargées en affichant quelques informations de base sur l'étudiant.

Affichage des informations sur les étudiants

Il est maintenant temps de commencer à incorporer certaines des données chargées par le rapport. Tout d’abord, faites glisser un contrôle TextBox et un contrôle Container sur le corps du rapport. Développez les deux afin qu'ils s'étendent sur la majeure partie de la largeur de la page, et à l'intérieur du contrôle TextBox, incluez le texte « Informations sur l'étudiant » :

Nous utiliserons ce conteneur pour contenir toutes les informations associées à l'étudiant.

Maintenant, nous allons placer les TextBox à l'intérieur du conteneur ; ceux-ci seront utilisés à la fois pour les étiquettes et pour contenir les informations des ensembles de données.

Configurez le conteneur pour qu'il corresponde à ce qui suit :

Désormais, dans chacune des TextBox vides, nous souhaitons inclure des expressions qui récupèrent les données de notre ensemble de données d'informations sur les étudiants.

Incluez le texte suivant dans les TextBox associées :

Une fois terminé, vous devriez pouvoir prévisualiser le rapport et voir les éléments suivants :

Construire le résumé GPA et le tableau des progrès académiques

Ensuite, nous afficherons des informations relatives aux notes de l'élève.

Tout d’abord, nous allons créer la section Résumé GPA ; comme dans la section précédente, faites glisser un contrôle TextBox et Container sur le rapport. Développez les deux afin qu'ils s'étendent sur la majeure partie de la largeur de la page, et à l'intérieur du contrôle TextBox, incluez le texte « Résumé GPA » :

À l'intérieur de ce conteneur, nous souhaitons afficher la moyenne globale de l'étudiant, ainsi que son centile.

Faites glisser quatre TextBox dans le conteneur, en les configurant comme telles :

Ensuite, nous allons devoir configurer quelques expressions supplémentaires à l'intérieur des TextBox vides :

L'expression GPA globale calculera le percentile dans lequel ils se situent, puis, sur cette base, fournira une valeur GPA numérique associée. L'expression Percentile calcule simplement leur note en fonction d'un pourcentage.

Une fois terminé, vous devriez pouvoir voir les éléments suivants lors de la prévisualisation du rapport :

Maintenant que nous avons créé le résumé, il est temps de montrer une répartition des progrès de l'élève par matière. Sous la section Résumé GPA, faites glisser un contrôle TextBox et un contrôle Table sur le corps du rapport. À l’intérieur de la TextBox, incluez le texte « Progrès académique », tandis qu’à l’intérieur du tableau, incluez les en-têtes de colonnes suivants :

• Sujet
• Professeur
• Trimestre 1
• Trimestre 2
• Trimestre 3

Une fois terminé, cela devrait ressembler à ceci :

La prochaine chose que nous devons faire est d’associer le bon ensemble de données au tableau. Sélectionnez le contrôle Table, puis dans le panneau Propriétés, définissez la liste déroulante Nom de l'ensemble de données pour utiliser l'ensemble de données de marquage . Nous pouvons désormais référencer les données de cet ensemble de données dans le tableau.

Remplissez le reste du tableau comme tel :

Après un petit style supplémentaire, le champ Table se présente désormais comme tel :

Lorsque nous prévisualisons notre rapport, le tableau devrait ressembler à ceci :

Ajout du tableau de progression des comportements et des attitudes

Maintenant que les utilisateurs peuvent visualiser leurs progrès académiques, il est temps pour nous d'ajouter une section montrant les notes de l'enseignant sur les progrès comportementaux et attitudes de l'élève. Avant de faire cela, nous ajouterons une nouvelle section à notre rapport. Au bas du concepteur de rapport, vous verrez un bouton Ajouter une section ; appuyez dessus, et cela ajoutera une nouvelle page/section continue à votre rapport :

Maintenant, sous l'en-tête de cette nouvelle section, ajoutez un contrôle TextBox, un contrôle Container et trois contrôles TextBox à l'intérieur du contrôle Container :

Comme vous pouvez le constater, nous avons rempli ces TextBox avec notre propre texte. Avant d'ajouter les contrôles Tablix, nous souhaitons apporter une modification supplémentaire.

Dans ces tableaux, nous souhaitons utiliser des icônes pour afficher où se situe l'étudiant en termes de Excellent , Satisfaisant et Besoin d'amélioration . Nous allons utiliser des icônes vertes, jaunes et rouges. Pour les ajouter, ajoutez les valeurs suivantes à la propriété Image de la TextBox associée :

Maintenant, si nous prévisualisons le rapport, nous devrions voir ce qui suit :

Maintenant que le conteneur Tablix est configuré, il est temps d'ajouter les contrôles Tablix pour afficher les données de progression du comportement et de l'attitude. Faites glisser un contrôle Tablix dans ce conteneur ; vous verrez l'assistant Tablix apparaître dans la fenêtre du concepteur :

L'assistant Tablix est un outil extrêmement puissant pour créer un contrôle Tablix (ou tableau croisé dynamique comme on l'appelle également), qui peut afficher les données de manière plus dynamique qu'un tableau standard.

Nous allons utiliser les données de l'ensemble de données comportementales que nous avons créé au début de l'article. Développez cet ensemble de données, puis faites glisser et déposez la valeur BehavioralMeasure dans la section Groupes de lignes de l'assistant, puis faites glisser et déposez les valeurs T1 , T2 et T3 dans la section Valeurs de l'assistant. Assurez-vous de modifier les valeurs globales pour T1, T2 et T3 de Count à None .

Avant de terminer, cliquez sur le bouton Filtres dans l'assistant ; nous devons configurer un filtre pour ce tableau. Ici, cliquez sur le bouton Ajouter pour ajouter un nouveau filtre. Définissez la première case sur le champ Type de l'ensemble de données et définissez le filtre pour rechercher la chaîne « Habitude de travail » :

Une fois terminé, vous pouvez appuyer sur le bouton OK et voir à quoi ressemble votre tableau à ce stade :

Maintenant, comme pour les zones de texte Excellent Satisfaisant et Besoin d'amélioration , nous allons mettre à jour les cellules de données des colonnes T1, T2 et T3 pour afficher les icônes au lieu des valeurs de texte. Pour chacune de ces cellules de données, supprimez la valeur texte et mettez à jour la propriété Image de la TextBox associée :

Cela fera en sorte que le contrôle Tablix placera l'icône de feu de circulation correcte dans la cellule en fonction de la valeur de la cellule. Après quelques mises à jour de style, notre premier Tablix devrait ressembler à ceci :

Lorsque nous prévisualisons le rapport, le tableau devrait ressembler à ceci :

Nous devons maintenant créer le deuxième contrôle Tablix pour afficher les informations d’attitude. La bonne nouvelle est que ce Tablix est presque identique à celui que nous venons de créer. Copiez et collez le premier tableau que nous avons créé, puis placez-le dans le conteneur juste en dessous de l'autre tableau. Ensuite, mettez à jour la première cellule d'en-tête de « Habitudes de travail » vers « Adhésion au code de conduite ».

Enfin, sélectionnez le deuxième contrôle Tablix et cliquez sur l'icône d'engrenage en haut à droite du contrôle ; cela rouvrira l'assistant Tablix. Cliquez sur le bouton Filtres ; nous allons modifier le filtre que nous utilisons actuellement.

Mettez à jour la valeur du texte du filtre de « Habitudes de travail » à « Conduite en classe ». Maintenant, la section Progrès comportemental et attitude devrait ressembler à ceci :

Lorsque nous prévisualisons le rapport, la section Progression des comportements et des attitudes devrait ressembler à ceci :

Ajout du tableau de présence

La dernière section que nous allons ajouter à notre rapport montrera l'assiduité de l'élève. Faites glisser un contrôle TextBox et un contrôle Tablix sur le rapport, puis placez-les sous la section Progression comportementale et attitude.

Dans l'assistant Tablix, nous allons utiliser l'ensemble de données de présence ; faites glisser la valeur Jours dans la section Groupes de lignes de l'assistant et faites glisser les valeurs T1 , T2 et T3 dans la section Valeurs de l'assistant.

Assurez-vous également de définir les valeurs globales pour T1 , T2 et T3 sur Sum :

Maintenant, la section Présence devrait ressembler à ceci :

Et lorsque nous prévisualisons le rapport, il devrait ressembler à ceci :

Maintenant que le rapport est terminé, lorsque nous prévisualisons le rapport, les pages devraient ressembler à ceci :

Ajout d'ActiveReportsJS à une application JavaScript

Maintenant que nous avons créé le rapport de progression de nos étudiants, il est temps d'ajouter la visionneuse de rapports ActiveReportsJS à une application JavaScript afin que nous puissions afficher le rapport dans le navigateur. Créez un nouveau fichier appelé index.html et ouvrez ce fichier dans l'IDE de votre choix.

Nous allons ajouter le code suivant au fichier :

 <!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>

Maintenant que le fichier HTML est configuré, il est temps d'ajouter ActiveReportsJS au fichier. Pour cela, nous allons utiliser le CDN pour charger les fichiers requis.

Dans la balise <head> , ajoutez le code suivant :

 <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>

Les deux premières lignes de code chargent les fichiers CSS requis : le fichier CSS principal et le fichier CSS du visualiseur. Ensuite, nous chargeons le fichier JavaScript principal et le fichier JavaScript de la visionneuse. Enfin, nous chargeons un fichier PDF, des données tabulaires et un fichier HTML JavaScript ; ces fichiers donnent aux utilisateurs la possibilité d'exporter le rapport dans les types de fichiers respectifs.

Si vous ne souhaitez pas autoriser les utilisateurs à exporter le rapport dans un format spécifique, il vous suffit d'exclure la balise <script> associée et les utilisateurs ne pourront pas exporter dans ce type de fichier.

Ensuite, nous allons ajouter quelques styles de base aux éléments de la page. À l'intérieur de la balise <head> , sous les balises de script que nous venons d'ajouter, ajoutez le code suivant :

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

Cela supprimera les marges de l'élément body et définira également la largeur et la hauteur de l'élément avec l'ID de viewer-host .

Maintenant, à l’intérieur de la balise <body> , ajoutez l’élément suivant :

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

Nous avons donné à ce div l'ID de viewer-host ; cela signifiera qu'il recevra les styles CSS que nous avons définis précédemment, mais cela nous permettra également de lier la visionneuse de rapports JavaScript au div.

Enfin, sous le div, ajoutez le code suivant :

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

Ce JavaScript créera une nouvelle visionneuse ActiveReportsJS, en l'associant à l'élément portant l'ID viewer-host . Ensuite, nous appelons la méthode open du visualiseur et transmettons le nom de notre rapport.

La dernière chose dont vous devez être sûr est que vous placez le rapport dans le même dossier que votre fichier index.html ; si ce n'est pas le cas, assurez-vous d'indiquer l'emplacement correct de votre rapport.

Il ne reste plus qu'à exécuter l'application. Vous pouvez utiliser n'importe quel serveur Web statique pour exécuter l'application ; puisque nous utilisons Visual Studio Code, nous utilisons l'extension Live Server pour démarrer rapidement un serveur Web statique. Lorsque vous ouvrez l'application dans votre navigateur, vous devriez voir ce qui suit :

Conclusion

Et c'est tout ce qu'il y a à faire ! Comme vous pouvez le constater, ActiveReportsJS facilite la création de rapports de progression personnalisés, permettant aux enseignants et aux étudiants de suivre les progrès de l'élève tout au long de l'année scolaire.

Si vous souhaitez télécharger le rapport et l'application créés dans cet article, vous pouvez trouver le référentiel ici .

Bon codage !