• Intelligence Artificielle Générative à l'UNIGE
    Guide d'utilisation de l'intelligence artificielle générative à l'Université de Genève
  • Lunch and Learn
    Lunchs Pédagogiques : venez partager sur des thématiques vives dans l'enseignement !
  • Makeiteasy
    Une plateforme pour tester et améliorer vos compétences numériques à votre rythme
  • Ciel cherche: rédacteurs/trices

Tag : H5P

Créer et partager facilement du contenu H5P avec LUMI

Introduction

La transformation digitale dans le domaine de la formation marque l’émergence de nouveaux outils pédagogiques interactifs comme H5P. Le fonctionnement simple de H5P, ainsi que le large éventail d’activités qu’il permet de créer séduisent de plus en plus les enseignant-es.
Cependant, ils/elles sont confronté-es particulièrement à un problème d’accès à H5P, son utilisation nécessitant un système d’hébergement et son plugin n’étant intégré que sur quelques plateformes comme Moodle.

Au CFCD un certain nombre de questions sur l’outil H5P revient très souvent : comment rendre une formation interactive et plus attrayante avec H5P ? Comment rendre un contenu H5P utilisable hors ligne pour des étudiant-es qui ont des problèmes de connexion internet ?

C’est dans le cadre de notre veille, et pour répondre aux demandes des équipes pédagogiques que nous avons découvert l’application Lumi. Dans ce billet, nous allons partager avec vous les raisons pour lesquelles il pourrait être utile de créer son contenu H5P avec Lumi, ainsi que les étapes pour y parvenir. Nous vous montrerons également comment intégrer les activités H5P dans un padlet ou un projet storyline.

À propos de H5P et Lumi

H5P signifie HTML 5 package, c’est un logiciel multiplateforme, basé sur du HTML 5 et du JavaScript. Il permet de créer des activités d’apprentissage interactives et de les intégrer dans votre espace de cours Moodle. Son succès s’explique par le fait que son utilisation ne demande pas des compétences techniques avancées, il est à la portée de tous et toutes.

Désormais, l’application Lumi que vous pouvez installer sur votre ordinateur vous permet de créer, éditer, visualiser et partager votre contenu H5P avec vos étudiant-es. Cette application fonctionne sans connexion internet, elle est gratuite et open source.
À présent, vous savez ce que permet Lumi, voyons ensemble comment elle peut vous faciliter la création de vos contenus H5P.

Pourquoi utiliser Lumi ?

L’application Lumi est intéressante et pratique pour les raisons suivantes, d’une part elle est simple à installer, son interface est intuitive et facile à prendre en main. Dorénavant, quand vous travaillez avec H5P et que vous souhaitez visualiser ou tester votre création H5P, vous n’êtes plus obligé-es de l’enregistrer comme dans Moodle, Lumi offre une fonctionnalité importante qui vous permet d’avoir un aperçu rapide de votre création, elle accélère considérablement le temps de conception. Elle est idéale aussi pour créer plusieurs activités H5P au même moment.
D’autre part, elle prend en charge tous les types de contenus H5P, elle peut être utile si vous souhaitez créer une activité H5P non-disponible sur Moodle.unige.ch comme par exemple le livre interactif ou tant d’autres de la bibliothèque H5P, ou si vous souhaitez partager votre contenu H5P avec vos étudiant-es afin qu’ils/elles puissent le consulter, et interagir avec eux/elles directement sans avoir recours à une plateforme en ligne. Elle offre la possibilité d’exporter votre contenu sous forme de fichiers HTML 5 ou paquet SCORM. De plus, elle propose une fonctionnalité Analytics, que vous pouvez activer pour insérer un outil de rapport afin de permettre à vos étudiant-es de sauvegarder leurs résultats et de vous les envoyer. Ce rapport contient des traces d’apprentissage que vous pouvez analyser pour améliorer votre formation.

Nous l’avons testé, le livre interactif s’est révélé utile dans différents contextes, notamment pour développer un Module au format e-Learning, ou pour créer un tutoriel comme ce guide que nous avons conçu pour un atelier de formation. Actuellement, nous menons aussi une réflexion sur comment utiliser le livre interactif pour présenter les tutoriels de manière structurées, et pour proposer un parcours d’auto-apprentissage afin d’offrir une plus grande autonomie aux étudiant-es et aux enseignant-es dans la prise en main de la nouvelle version de Moodle, et plus largement des outils/logiciels institutionnels.
Maintenant, intéressons-nous de plus près au potentiel pédagogique du livre interactif.

Qu’est-ce que le livre interactif ?

C’est un contenu H5P qui vous permet de créer un support pédagogique sous forme de livre avec plusieurs pages interactives, de les organiser en chapitres et sous-chapitres. Dans votre livre, vous pouvez présenter des éléments théoriques, ajouter des fichiers multimédias et des contrôles de connaissances ou des quiz à la fin des chapitres. Ainsi vos étudiant-es pourront parcourir les chapitres du livre tout en réalisant différentes activités interactives ou en regardant des vidéos, en écoutant des enregistrements audio. Présenter un contenu léger sous une double modalité visuelle et auditive favorise un meilleur apprentissage, et permet de s’adapter aux besoins de vos étudiant-es.

Nous avons récemment utilisé le livre interactif pour développer un module de formation en ligne pour le programme Master of Advanced Studies in European and International Governance. Dans cet extrait vidéo ci-dessous, vous trouverez quelques activités que nous avons intégrées pour donner un rôle actif aux participant-es, et pour renforcer les apprentissages clés :

À présent, regardons ensemble la liste complète des types de contenus que vous pouvez utiliser dans un livre :

Quelques pistes pédagogiques

  • L’application Lumi vous permet de créer un module d’apprentissage autonome sur une partie d’un cours en combinant différents types de contenus interactifs comme des présentations, des quiz, des vidéos interactives sur plusieurs pages, consultez ce livre interactif que vous pouvez réutiliser et adapter.
  • Elle peut être aussi utilisée en pédagogie inversée pour intégrer des activités interactives dans le contenu d’apprentissage asynchrone, par exemple une classe inversée basée sur des vidéos que vos étudiant-es doivent visionner avant le cours, vous pouvez les enrichir par des quiz pour leur permettre de vérifier la bonne compréhension du message pédagogique diffusé. Vous pouvez également chapitrer les vidéos, ou insérer à des points précis de la vidéo des résumés, et des liens web vers des ressources complémentaires pour renforcer les connaissances et les compétences impliquées.
  • Elle vous offre la possibilité de construire des activités de mise en situation avec branching scénario, comme dans l’exemple de ce précédent billet blog des cas cliniques ont été développés par les enseignant-es, les étudiant-es sont mis-es en situation clinique qu’ils/elles doivent gérer.
  • Elle aide à transformer votre contenu statique et long afin d’éviter une surcharge d’information.
  • Elle permet de créer des visites virtuelles d’un laboratoire ou d’un site historique avec l’activité “virtual tour 360”. Vos images 360 (équirectangulaires) et normales, peuvent être enrichies d’interactivités telles que des vidéos, des explications audios et des questions interactives. Ce type de contenu est utilisé pour donner une impression d’exploration et d’apprentissage dans un environnement réaliste. (source H5P.org)
    Nous vous invitons à explorer le laboratoire du Cambrian College.
  • Elle peut être utile si vous souhaitez mettre en place des activités pédagogiques qui stimulent et renforcent la production orale chez vos étudiant-es.
  • Elle permet de mettre à disposition de vos étudiant-es des contenus interactifs formatifs, ils/elles peuvent les réaliser plusieurs fois avec des rétroactions instantanées afin de les permettre de corriger leurs erreurs, et de consolider leurs connaissances, comme dans cet exemple de quiz sur les objectifs de développement durable.
  • Elle permet de proposer des expériences d’apprentissages ludiques et variées, consultez cette activité proposée lors de notre atelier H5P.

Où trouver des exemples d’activités H5P ?

Nous vous suggérons de consulter les pages web ci-dessous, selon vos besoins, vous pouvez affiner votre recherche en utilisant le filtre par activité H5P ou par domaine d’enseignement :

Comment fonctionne Lumi ?

Installation

Pour commencer, connectez-vous sur le site web de Lumi, téléchargez la version qui correspond à votre système d’exploitation et installez Lumi sur votre ordinateur.

Démarrer

Ensuite, vous devez lancer l’application, pour cette action aucune connexion internet n’est requise, après vous pouvez choisir soit d’ouvrir une activité existante avec l’extension de fichier .h5p pour l’adapter ou la modifier, ou de créer une nouvelle activité.

Le fonctionnement de cet éditeur de contenu H5P est identique aux interfaces H5P des plateformes en ligne, vous devez tout d’abord choisir le type d’activité, par contre certains contenus h5p ne sont pas activés, il faudra les installer, puis créer votre contenu. Comme mentionné précédemment la fonctionnalité intéressante de cet éditeur, c’est la possibilité d’avoir un aperçu direct et rapide de vos créations en cliquant tout simplement sur le bouton “vue”.

Sauvegarde et exportation

Après la conception de votre contenu H5P, il est enregistré par défaut au format .h5p, ce qui vous permet de le modifier ou de l’afficher directement sur Moodle si l’activité H5P est installée. Si ce n’est pas le cas, vous pouvez aussi exporter votre contenu H5P au format HTML 5, le sauvegarder localement sur votre ordinateur et le partager sous forme de pièce jointe avec vos étudiant-es par courriel ou le déposer comme un fichier sur Moodle. Par contre, en déposant votre contenu H5P sous forme de fichier sur Moodle, vous ne pouvez pas le lier au carnet de notes.

L’exportation est également possible sous forme de paquet SCORM, imaginez que vous souhaitez partager votre contenu H5P dans une autre université et sur leur plateforme le plugin H5P n’est pas installé, alors vous pourrez simplement partager le paquet SCORM qui est accepté par la plupart des LMS (learning management system). En plus, cela empêche les problèmes de lecture de votre contenu H5P attribuables aux mises à jour du logiciel, nous avons pu constater que certaines mises à jour risquent de rendre votre contenu non fonctionnel.

H5P avec Storyline et Padlet

Avez-vous déjà pensé à utiliser une activité H5P dans votre projet storyline ? Ou peut-être vous vous êtes demandé-es comment ajouter un exercice interactif dans votre Padlet ?

Grâce à Lumi, vous pouvez maintenant compléter votre contenu pédagogique créé sur Storyline ou sur votre Padlet par une activité H5P. Il vous suffit d’exporter votre activité au format HTML 5 tout-en-un, ce format est largement accepté par presque toutes les plateformes et vous l’intégrez dans l’une des applications ci-dessus sous forme de fichier HTML. Vous pouvez consulter ce guide qui vous accompagne étape par étape.

Conclusion

En somme, nous pouvons retenir que l’éditeur H5P change la façon de présenter le savoir, nous passons à des contenus statiques que l’étudiant-e consulte de manière passive à des supports d’apprentissage interactifs, engageants et attrayants qui permettent d’offrir une expérience d’apprentissage optimale. Il permet aussi de donner une dimension ludique à votre enseignement. Néanmoins, il est conseillé d’ajouter un contenu interactif dans vos présentations à condition qu’il apporte vraiment une plus-value pédagogique à votre cours, sinon il risque d’être un distracteur et d’avoir un effet négatif sur l’attention.

La facilité de prise en main de H5P, associée aux nouvelles fonctionnalités proposées par Lumi pour créer du contenu H5P rend cette application particulièrement utile pour les enseignant-es.

Toutefois, il est important de souligner que la personnalisation des contenus H5P est limitée, la traduction en français est également incomplète, les résultats des activités reliés au carnet de notes Moodle ne sont pas détaillés. Ces aspects restent encore à améliorer.

Par ailleurs, l’équipe H5P continue de créer de nouveaux contenus interactifs actuellement en version béta. Les versions officielles pourraient-être publiées prochainement, la mise à jour de l’application Lumi vous permettra de bénéficier de ces contenus.

En espérant que ce billet vous a donné des idées pour vos cours, comment pensez-vous créer votre contenu H5P avec Lumi ? Nous vous invitons à partager votre expérience dans les commentaires.



Utilisation de contenus interactifs H5P pour enrichir l’expérience des participant-es sur Moodle

Les enseignant-es de pédiatrie de l’Université de Genève avaient par le passé développé un site web très complet contenant toutes les ressources d’apprentissage nécessaires à la formation pré-graduée de médecine. Afin de bénéficier des fonctions d’un véritable environnement numérique d’apprentissage et de distribuer la tâche de mise à jour aux enseignant-es et à leurs secrétariats, ce site web a été transféré dans le courant de l’année passée sur l’instance Moodle de l’université. Ce transfert a permis de repenser l’organisation du contenu et d’exploiter une large palette de ressources et activités disponibles sur Moodle. Dans ce contexte, ce billet présente l’utilisation de trois contenus interactifs H5P: accordion, branching scenario, et linked image swap.

H5P

H5P est un plugin utilisable par différentes plateformes de contenu comme, par exemple, WordPress, Drupal ou Moodle, et qui permet de créer du contenu interactif  tel que des vidéos interactives, des présentations intégrant des questions ou des jeux. H5P est développé par la société norvégienne Joubel qui propose H5P comme service (c’est leur source de revenu) mais qui met aussi à disposition de la communauté internet ses développements en mode open source afin que des développeurs/euses puissent enrichir la collection. Pour en savoir plus sur l’usage de H5P sur Moodle à l’Université de Genève, consultez les billets précédents de ce blog.

Accordion

Le contenu de l’ancien site web de pédiatrie étant trop important pour le mettre dans un seul espace de cours, il a donc été réorganisé sous la forme de 19 espaces de cours regroupés dans une catégorie. La navigation entre ces espaces de cours est facilitée par un menu de navigation créé à l’aide de la fonction H5P Accordion. Ce menu est affiché sur la droite de la page d’accueil de chacun des 19 espaces de cours. Un clic sur un élément du menu affiche le sous-menu de cet élément comme illustré ci-dessous avec le sous-menu ouvert de Chirurgie pédiatrique. Un clic sur un deuxième élément ferme le sous-menu précédent et ouvre le contenu de ce deuxième élément. Ce jeu d’ouverture et de fermeture à la manière d’un accordéon donne son nom à cette fonction H5P.

Capture d'écran montrant le menu de navigation

En pratique, l’activité H5P Accordion est créée dans l’un des espaces de cours (dans notre cas Accueil: organisation et objectifs) de la catégorie Pédiatrie, et elle est cachée aux participant-es. Un bloc de type HTML , dans lequel nous avons mis un iframe pointant vers le menu de navigation H5P créé précédemment, est ajouté dans chacun des 19 espaces de cours. Le menu de navigation n’existant qu’à un seul endroit, il est donc facile de le modifier et de répercuter de facto ces modifications dans tous les espaces de cours.

Toutefois, pour que ce menu de navigation soit visible aux utilisateurs/trices dans tous les espaces de cours de cette catégorie Pédiatrie, ils et elles doivent être inscrit-es à l’espace de cours dans lequel l’activité H5P Accordion a été créé. Lors de la journée d’introduction de stage en pédiatrie, les étudiant-es sont informé-es qu’ils et elles doivent s’auto-inscrire à l’espace de cours d’accueil et, ce faisant, ils et elles sont automatiquement inscrit-es aux 18 autres espaces de cours car ces derniers contiennent la méthode d’inscription « Lien méta-cours » qui pointe vers l’espace de cours d’accueil.

Ainsi cette activité H5P Accordion permet de créer un menu de navigation unique entre plusieurs espaces de cours Moodle.

Branching scenario

L’activité H5P Branching scenario permet de créer un parcours d’apprentissage dont le chemin dépend des choix des utilisateurs/trices comme démontré dans le brillant exemple en lien.

Chaque étape du parcours peut être composée de l’un des six types de contenu suivants:

  • présentation de cours: équivalent à une série de dias PowerPoint. Chaque dia peut contenir des blocs de texte, des éléments multimédia, ou divers types de questions
  • texte
  • image simple ou avec zones interactives
  • vidéo simple ou interactive

Selon les besoins du scénario, le parcours d’apprentissage peut devenir arborescent en insérant des questions de branchement entre les étapes.

Nous avons utilisé cette fonction pour développer des cas cliniques courts, de 10 à 15 étapes. Typiquement, l’étudiant-e est mis-e dans une situation clinique qu’il/elle doit gérer comme montré dans les deux étapes successives ci-dessous.

L’interface graphique de ces cas est séduisante et appréciée par les enseignant-es et les étudiant-es. Toutefois, le contenu de type Présentation de cours, qui est le plus versatile, a une taille de présentation limitée et restreint donc son usage à des textes courts. Si le parcours d’apprentissage doit contenir beaucoup d’informations théoriques, il est préférable d’utiliser l’activité Leçon de Moodle.

Linked image swap

Linked image swap n’est pas une fonction de base disponible sur H5P mais un nouveau type de contenu H5P créé par un développeur indépendant et mis à disposition de la communauté Internet. C’est un exemple parfait des bénéfices que peut apporter la mise à disposition en open source d’un projet développé originellement par une compagnie informatique privée.

Pour l’historique, un enseignant d’anatomie de notre université cherchait un outil permettant à ses étudiant-es de revoir de manière interactive les différents éléments d’un objet anatomique. Curieux et déterminé, cet enseignant a trouvé sur le forum de H5P le développement d’un collègue qui correspondait à ses besoins. A sa requête, cet outil a été évalué puis intégré dans la liste des fonctions H5P de Moodle de l’Université de Genève.

Étant donné que toutes les fonctions H5P peuvent être intégrées dans les ressources de type Page ou Livre de Moodle, la fonction Linked image swap est utilisée dans quelques chapitres de Livres des sites Moodle de pédiatrie, comme celui pour la révision des bases de l’audition montré ci-dessous. Un clic sur l’un des boutons de gauche (exemple: Osselets: Enclume) affiche de manière colorée l’élément correspondant sur le schéma de droite. En pratique, pour chaque élément d’anatomie du menu de gauche, il faut créer une image correspondante contenant un marqueur permettant d’identifier la pièce anatomique, en l’occurrence en la mettant en couleur.

Conclusion

Moodle est parfois critiqué parce que son interface n’est pas aussi attrayante que celle de produits commerciaux. Ces quelques exemples montrent en revanche que l’on peut créer avec Moodle un environnement numérique d’apprentissage non seulement riche et interactif mais aussi pérenne parce que Moodle est un choix institutionnel.



Dynamiser un cours de langue hybride avec des activités interactives par H5P et Learningapps

Ce billet est co-proposé par Jue Wang Szilas du CFCD et Roberto Paternostro de la Maison des langues

La Maison des Langues de l’Université de Genève a conçu un dispositif hybride d’enseignement-apprentissage appelé « FLE (Français Langue Etrangère) Pré Mobilité », destiné à préparer les étudiant-es d’échange ayant un niveau de français débutant et élémentaire à s’intégrer à l’environnement linguistique et socio-culturel genevois et suisse romand avant leur arrivée à l’Université de Genève. Ce projet a obtenu le soutien de la Commission informatique de l’Université de Genève (COINF) pour l’année 2019.

Ce dispositif hybride permet aux étudiant-es d’acquérir rapidement les bases du français et d’entrer en contact avec le milieu socio-culturel et universitaire genevois et suisse romand avant même d’arriver sur place.

Il comporte deux parties, qui articulent distanciel (asynchrone et synchrone) et présentiel. La première partie se déroule à distance, grâce à une plateforme interactive où les étudiant-es travaillent en autonomie. De plus, ils/elles sont accompagné-es par un-e enseignant-e en visioconférence une à deux fois par semaine. La deuxième partie du cours se déroule sur place, à l’Université de Genève. Par le travail en présentiel, les étudiant-es consolident ce qu’ils/elles ont appris à distance et sont ainsi prêt-es pour leur immersion à l’Université de Genève.

Le cours en ligne s’organise autour de 10 situations relatives à la vie quotidienne et académique (par exemple, la présentation, l’orientation en ville, les achats, le logement, les démarches administratives, les sorties, etc.). Chaque situation comporte des vidéos et des activités interactives, des exercices, des documents explicatifs, qui permettent aux étudiant-es de travailler la compréhension orale et écrite, la grammaire, le vocabulaire ainsi que la prononciation. Lors des visioconférences avec l’enseignant-e et les autres participant-es, ils/elles pratiquent l’expression orale.

Dans ce billet, nous montrons quelques exemples de ces activités interactives qui proposent un apprentissage ludique et motivant, construites grâce à l’outil H5P et à l’application Learningapps.