Tutoriel – Utiliser le générateur de cours interactifs H5P

Information

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 dans la version de votre système d’exploitation : 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 :

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.

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.
_images/H5P-1.jpg

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

_images/H5P-2.jpg

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.