Tutoriel - Utiliser le générateur de cours interactifs H5P#
Information
Auteur : Philippe Dessus, Inspé & LaRAC, Univ. Grenoble Alpes, et Océane Poupart.
Date de création : Août 2021.
Résumé : Ce tutoriel présente rapidement le logiciel de création de cours interactifs H5P, via Lumi, qui autorise l’édition et la visualisation des cours.
Voir aussi : Documents Ressources – Générateurs de cours interactifs, Tutoriel – Utiliser le générateur de cours interactifs eXe Learning, Tutoriel – Présentation rapide de NetQuiz Pro, Tutoriel – Présentation du générateur d’explorations interactives Oppia.
Présentation de H5P et de Lumi#
H5P est un outil de publication de contenus éducatifs en HTML libre et gratuit. Lumi est une interface multilingue permettant l’édition, la visualisation et l’exportation en HTML faciles de ces contenus. Pour créer un cours interactif il suffit donc d’utiliser Lumi.
H5P dispose de modules pour son intégration dans des plates-formes d’e-learning (comme Moodle, Drupal, ou même WordPress), mais il est aussi possible de l’utiliser sur n’importe quel site web via l’exportation du contenu en HTML. À ce jour, l’interface de Lumi n’est que partiellement traduite en français, sans que cela soit trop gênant.
Tutoriel d’initiation à Lumi et H5P#
Ce tutoriel n’a pas pour vocation d’être un manuel, mais présente l’essentiel pour commencer à travailler avec Lumi sous H5P. Pour commencer, télécharger Lumi (version “Éditeur de bureau”) dans la version de votre système d’exploitation (la version la plus récente est la 0.9.4) : https://lumi.education/#download. Lumi est un éditeur et visualiseur H5P. Vous pouvez trouver plus d’informations sur H5P et Lumi dans les sites suivants :
[La documentation officielle de H5P (en anglais) <https://h5p.org/documentation][la documentation officielle de h5p (en anglais) <https://h5p.org/documentation].
Un descriptif plus approfondi des fonctionnalités d’H5P (Debesson, 2020)
H5P permet de créer de très nombreux “contenus interactifs”, i.e., petites activités d’apprentissage pouvant être insérées dans une plate-forme d’e-learning (comme Moodle), ou même être autonomes. Comme notre but est d’avoir un “cours interactif” mêlant présentation de contenu et activités, nous nous centrerons sur deux activités qui autorisent cela : Le Livre interactif et le Scénario de branchement.
0. Installation des activités nécessaires#
Les récentes versions de Lumi rendent plus difficile l’utilisation gratuite de certaines activités (comme les activités “livre interactif” ou “scénario de branchement”). Le but est d’avoir à disposition un fichier au format H5P portant sur l’activité souhaitée. Cela est récupérable sur internet. On peut aussi procéder ainsi :
Installer Lumi (version de bureau) ; cette vidéo de Prof TIM peut aider.
Aller à la plateforme en ligne de Lumi et se créer un compte.
Une première page s’affiche indiquant qu’on dispose d’une période d’essai de 30 jours pour utiliser Lumi en ligne avant de devoir payer un abonnement. Passer cette page et en bas de la page d’accueil, cliquez sur “Créer un nouveau contenu”.
De même que dans l’application, il apparaît une page où on peut éditer ou voir le contenu de l’activité. Dans un premier temps, dans la section “éditer”, apparaît une liste de toutes les activités proposées par Lumi - dont celles manquantes. Cliquer sur “Détails” de l’activité que vous voudriez avoir dans votre application.
Cliquer sur le bouton “Utiliser” pour créer une nouvelle activité de ce type puis lui donner un titre.
Cliquer sur le bouton en haut à droite de la page “sauvegarder”. Remarque : Selon les activités, il faudra remplir en plus du titre d’autres champs pour pouvoir la sauvegarder, un message apparaîtra pour indiquer les champs concernés.
Les boutons à gauche de “Sauvegarder” ne sont alors plus grisés. Faites dérouler le menu en cliquant sur “Télécharger”, puis sur “H5P”. Une fenêtre de chargement apparaît, le téléchargement peut potentiellement prendre un peu de temps en fonction de l’activité choisie.
Une fois chargée, enregistrer l’activité avec la nouvelle fenêtre qui apparaît. Choisissez le dossier où vous voudrez enregistrer l’activité. Le titre du fichier est par défaut le nom du titre choisi à l’étape 4.
Ouvrir ensuite l’application locale Lumi (de bureau), cliquer sur “début” dans la case “Editeur H5P”, puis sur “Ouvrir un fichier H5P” dans la colonne gauche de la page.
Allez chercher dans vos documents le fichier H5P que vous avez enregistré à l’étape 7. L’activité chargée est maintenant disponible pour d’autres créations. Reprendre à partir de l’étape 2 pour charger une autre activité.
1. Choix d’un type de cours#
Démarrer Lumi.
Cliquer sur l’icone de gauche “Éditeur H5P”.
Choisir “Créer un nouveau H5P”.
L’interface principale apparaît (voir Fig. 1), séparée en 2 parties : à gauche, l’accès aux fichiers déjà créés et sauvegardés ou la possibilité d’en créer un nouveau, à droite, la possibilité de choisir, d’éditer ou de visualiser le fichier sélectionné dans la partie gauche (resp. avec un clic sur les onglets ”Editer” et “Vue”.
Cherchez dans la liste les activités “Livre interactif (Interactive book)” et “Scénario de branchement (Branching scenario” et cliquez sur le bouton ”Obtenir” se trouvant à côté de chacun d’entre eux, ce qui charge les modèles de cours correspondants.
“Livre interactif” créera un ensemble d’activités incorporées dans un “livre” que les élèves pourront consulter dans l’ordre désiré. On choisira cette option pour réaliser un cours interactif “standard”.
“Scénario de branchement” créera un parcours personnalisé dans un ensemble de textes, images, ou vidéos. On choisira cette option pour créer un cours plus interactif, où l’élève peut progresser à son rythme vers la fin du cours. Il est à noter qu’il n’y a pas la possibilité de créer des QCM en tant que tels, mais des “questions de branche” qui, selon la réponse, amènent à telle ou telle partie du scénario. Cela est approprié pour des cours ludifiés.
Figure 1 – Présentation de l’interface générale de H5P.
2. Créer le cours#
L’étape 2 consiste à réaliser des éditions et visualisations successives du cours (avec des enregistrements pour ne rien perdre). Créer un livre interactif revient à ajouter des pages (nommées Colonnes) et de choisir pour chacune une ou des activités dans le menu déroulant “Contenu” (voir Fig. 2). On peut aussi créer une page de couverture avec un titre et une image. Pour afficher simplement du texte pour décrire le contenu à apprendre, on choisira l’activité “Texte”.
Les paramètres d’affichage pour chaque activité sont nombreux : on peut afficher la table des matières des différentes pages créées, l’indicateur de progrès pour la page en cours, la possibilité de passer à la page suivante même si toutes les activités de la page n’ont pas été réalisées, et enfin avoir accès à un résumé qui donne une vue d’ensemble des progrès et réponses (accessible à la fin de la table des matières).
Le menu “Options et textes” permet de formuler des intitulés de messages plus appropriés au niveau de ses élèves (des textes en français existent par défaut).
Figure 2 – Choix d’une activité dans une page de H5P
On ne peut décrire ici comment créer une activité, mais l’aide en ligne et les exemples permettent d’en avoir rapidement la maîtrise. Nous ne détaillerons pas ici plus avant les modalités de remplissage des principaux champs, car elles sont bien documentées sur Internet et dans les documents de référence ci-dessus.
- Dans un livre interactif, on privilégiera l’activité “Choix multiple” si on veut n’afficher qu’une question, et l’activité “Ensemble de questions (question set)” si on veut en faire passer plusieurs à la suite. Comme il est aisé de modifier une activité et d’en voir le résultat en cliquant sur l’onglet “Vue”, on n’hésitera pas à procéder par essai-erreur. Les champs pour renseigner un item sont standard :
la question : correspond à l’amorce ;
les options disponibles : correspondent à chaque réponse possible (on veillera à en cocher au moins une pour la bonne réponse). Pour chaque option on peut donner : - une indication qui s’affichera par un clic sur l’icone “information” ; - un commentaire en cas de bonne réponse, qui s’affiche sous la réponse, si elle a été choisie ; - un commentaire en cas de mauvaise réponse, qui s’affiche sous chaque mauvaise réponse.
Pour créer un scénario de branchement (encore en version beta, mais fonctionnelle), il est conseillé d’établir sur une grande feuille l’ensemble du parcours que pourra suivre un apprenant, en mentionnant les pages d’exposition de contenu (texte, image ou vidéo) et les “questions d’orientation” (branching question) dont les réponses permettront de passer à une autre partie ou bien d’approfondir des éléments mal compris. Le parcours Arts of Europe donne un bon exemple de ce qu’il est possible de faire. Considérer l’expérience de l’élève comme un “marché” dans lequel il pourra acquérir des connaissance est une métaphore intéressante (voir Concevoir un enseignement).
3. Exporter le cours pour le publier#
Une fois le cours créé, il est possible de l’exporter de plusieurs manières :
par Fichier>Enregistrer sous : pour l’exporter en format H5P (pour l’éditer sur un autre ordinateur) ;
par Fichier>Exporter : choisir “Fichier HTML tout-en-un” pour exporter le cours en un seul fichier HTML (attention, si le cours contient beaucoup de vidéos ou d’images, ce fichier sera trop important pour être envoyé par courriel) ; choisir “Un fichier HTML et plusieurs fichier multimédias” pour exporter le cours en plusieurs fichiers (par exemple, pour les publier sur un site internet ou les copier sur des ordinateurs en réseau). Pour les communiquer il sera préférable de les zipper en une seule archive ; choisir “Paquet SCORM” pour une importation dans une plate-forme e-learning.
Pour les deux premières options on peut inclure un “fichier rapporteur” qui permet à chaque élève d’envoyer à l’enseignant les traces de son parcours dans le cours interactif (via un fichier ayant l’extension .lumi). Pour une telle analyse, l’enseignant cliquera sur “Lumi Analytics” et sélectionnera un dossier dans lequel les fichiers “espions” sont stockés et une visualisation des parcours des élèves s’affichera.