Tutoriel : Présent ! Les étiquettes de présence interactives

Chaque enfant cherche son étiquette de présence dans le distributeur d’étiquettes. Il appuie ou clique sur son étiquette qui se place automatiquement sur une des fenêtres disponibles.

Chaque étiquette est personnalisable : écriture capitale, et/ou script et/ou cursive avec une image ou photographie. Il faut simplement respecter les dimensions suivantes : 100 pixels de haut et 85 pixels de large.

Le programme est hors-ligne. Il n’y a pas besoin d’Internet et les données des élèves sont stockées uniquement sur votre ordinateur ou votre tablette.

Le programme détecte automatiquement le nombre d’enfants inscrits en fonction des étiquettes que vous ferez (jusqu’à 30).
Le programme indique le nombre de présents et d’absents. Il indique les groupements de 10 élèves effectivement présents.
Vous pouvez cacher le nombre de présents ou d’absents en appuyant sur les boutons correspondants.

Un enfant se trompe et appuie sur une mauvaise étiquette, il suffit d’appuyer sur l’étiquette en question dans les présents pour la mettre à nouveau dans le distributeur.

Version 2 avec le fond rose : les étiquettes avec les nombres sont présentes par défaut. Il est possible de les faire disparaître puis réapparaître par un simple appui.
Mise à jour 02 avril 2022 : résolution de bugs.

Vous devez construire autant d’étiquettes que d’élèves inscrits. Si vous avez 25 élèves, vous construisez 25 étiquettes, ni plus, ni moins. Le programme est assez « intelligent » pour repérer 25 étiquettes donc 25 élèves inscrits :)
Chaque étiquette est une image au format jpg qui doit donc faire 100 pixels de long sur 85 pixels de large et sera nommée « eleve1.jpg », « eleve2.jpg », « eleve3.jpg » etc.

Vous placez vos fichiers images, l’image de fond (ecole-presence.png), l’image du bouton (bouton.png) et le programme « present.html » dans un même répertoire, par exemple « presents ». Vous ouvrez le fichier « present.html » (ou « presentV2.html pour la version 2) avec un navigateur Internet. Firefox sera le meilleur. Il fonctionnera sans connexion Internet.

Le programme est compatible avec Firefox et non Safari ou Chrome. Vous devez télécharger tous vos fichiers dans le répertoire « Download » de Firefox. Puis dans Firefox, vous allez sur l’icône « Bibliothèque » puis « Téléchargement » :

L’ensemble au format ZIP (programme, image de fond et exemple d’étiquettes)

L’ensemble au format ZIP (programme, image de fond et exemple d’étiquettes)