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 . Cela fera apparaître l'affichage de nos , et : Données sources de données ensembles de données paramètres Pour commencer, nous aurons besoin d’une source de données. Cliquez sur le bouton dans la section Sources de données pour afficher la fenêtre Sources de données : Ajouter À partir de là, nous pouvons indiquer au rapport où rechercher les données. Nous avons deux options concernant l'origine des données : ou . 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. JSON distant JSON intégré Pour ce rapport, nous utiliserons Embedded JSON pour charger plusieurs fichiers ; 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. JSON 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 à côté de la source de données que vous souhaitez utiliser ; cela fera apparaître la fenêtre Ensemble de données : Plus 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. $.* Si vous utilisez Remote JSON, vous devrez également fournir une valeur Uri/path ; cette valeur est transmise du rapport à l'API pour indiquer à l'API quelles données renvoyer. Remarque : Une fois le chemin JSON entré, appuyez sur le bouton pour confirmer que votre ensemble de données peut récupérer les données demandées. Valider Si tout fonctionne correctement, le champ devrait maintenant être renseigné avec les valeurs de nos données : Champs de base de 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 et cliquez sur les boutons et : Sections Ajouter un en-tête 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 et un contrôle dans l'en-tête de la page. TextBox Image À 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 , puis cliquez sur **Charger…** pour ouvrir l'explorateur de fichiers et sélectionnez l'image que vous souhaitez charger : Intégré 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 : Vous pouvez voir à l'intérieur de la chaîne que nous avons inclus des accolades, et à l'intérieur des accolades, l'expression ; cela renverra l'année en cours, et le rapport sait évaluer cela comme une expression car nous l'avons placé entre accolades. © {Year(Now())} GrapeCity, Inc. Tous droits réservés. Year(Now()) 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 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 » : Container À 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 . Nous pouvons désormais référencer les données de cet ensemble de données dans le tableau. de marquage 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 ; appuyez dessus, et cela ajoutera une nouvelle page/section continue à votre rapport : Ajouter une section 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 , et . Nous allons utiliser des icônes vertes, jaunes et rouges. Pour les ajouter, ajoutez les valeurs suivantes à la propriété de la TextBox associée : Excellent Satisfaisant Besoin d'amélioration Image 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 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 dans la section de l'assistant, puis faites glisser et déposez les valeurs , et dans la section de l'assistant. Assurez-vous de modifier les valeurs globales pour T1, T2 et T3 de à . comportementales BehavioralMeasure Groupes de lignes T1 T2 T3 Valeurs Count None Avant de terminer, cliquez sur le bouton dans l'assistant ; nous devons configurer un filtre pour ce tableau. Ici, cliquez sur le bouton pour ajouter un nouveau filtre. Définissez la première case sur le champ de l'ensemble de données et définissez le filtre pour rechercher la chaîne « Habitude de travail » : Filtres Ajouter Type Une fois terminé, vous pouvez appuyer sur le bouton et voir à quoi ressemble votre tableau à ce stade : OK Maintenant, comme pour les zones de texte et , 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é de la TextBox associée : Excellent Satisfaisant Besoin d'amélioration Image 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 ; nous allons modifier le filtre que nous utilisons actuellement. Filtres 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 ; faites glisser la valeur dans la section de l'assistant et faites glisser les valeurs , et dans la section de l'assistant. de présence Jours Groupes de lignes T1 T2 T3 Valeurs Assurez-vous également de définir les valeurs globales pour , et sur : T1 T2 T3 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é et ouvrez ce fichier dans de votre choix. index.html l'IDE Nous allons ajouter le code suivant au fichier : Student Progress Report 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 , ajoutez le code suivant : 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 JavaScript ; ces fichiers donnent aux utilisateurs la possibilité d'exporter le rapport dans les types de fichiers respectifs. HTML Si vous ne souhaitez pas autoriser les utilisateurs à exporter le rapport dans un format spécifique, il vous suffit d'exclure la balise 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 , sous les balises de script que nous venons d'ajouter, ajoutez le code suivant : body { margin: 0; } #viewer-host { width: 100%; height: 100vh; } 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 , ajoutez l’élément suivant : Nous avons donné à ce div l'ID de ; 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. viewer-host Enfin, sous le div, ajoutez le code suivant : var viewer = new ActiveReports.Viewer("#viewer-host"); viewer.open("StudentProgressReport.rdlx-json"); Ce JavaScript créera une nouvelle visionneuse ActiveReportsJS, en l'associant à l'élément portant l'ID . Ensuite, nous appelons la méthode open du visualiseur et transmettons le nom de notre rapport. viewer-host 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 pour exécuter l'application ; puisque nous utilisons Visual Studio Code, nous utilisons l'extension pour démarrer rapidement un serveur Web statique. Lorsque vous ouvrez l'application dans votre navigateur, vous devriez voir ce qui suit : serveur Web statique Live Server 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 ! Également publié ici.