🚩Article en cours de rédaction ======Créer des ressources interactives H5P====== ==Préambule== H5P est un ensemble d'activités (54 à ce jour) à visée pédagogique, à faire en ligne par l'étudiant. Elles peuvent être produites soit via le logiciel gratuit Lumi, soit directement dans Madoc ou Extradoc. Des informations, tutoriels et exemples peuvent être consultés sur la page suivante (en anglais, mais Google chrome propose une traduction de la page) : https://h5p.org/ \\ **Cet article ne traitera pas de chaque activité H5P en particulier, mais de la création, de l'insertion, et des paramètres généraux.** {{:madoc:icones-bloc:attention.png}}Attention\\ Pour des raisons techniques, H5P ne doit pas être utilisé pour des évaluations sommatives. Cet outil doit plutôt être considéré comme un moyen de permettre aux étudiants de s’entraîner et de s'auto-évaluer. == Prérequis== Avoir pris connaissance des typologies d'activités H5P (voir références ci-dessus).\\ Avoir choisi au préalable l'activité H5P qui correspond au besoin pédagogique et fonctionnalités souhaitées, et d'en préparer le contenu (textes, images, sons, vidéos le cas échéant) avant de créer l'activité.\\ Pour la production avec Lumi : avoir téléchargé l’outil à l'adresse suivante (Windows, MacOS, ou Linux) : https://app.lumi.education/#download. \\ Voici également un tutoriel vidéo de la DRANE Grand Est, pour installer et comprendre le fonctionnement global de Lumi : https://tube-numerique-educatif.apps.education.fr/w/48686f04-6074-4f52-ba13-56c8fed1e76f == Objectif == Créer des activités H5P avec Lumi ou directement dans Madoc ou Extradoc, et mettre à disposition des étudiants, ces ressources en ligne avec lesquelles ils pourront interagir pour découvrir, apprendre, ou revoir des notions, s'entraîner à des exercices de mise en pratique ou s'auto-évaluer sur leurs connaissances. ==Avant de commencer== {{:madoc:icones-bloc:astuce.png}}Bon à savoir : \\ * H5P gère en autonomie les tailles de fichiers photos, vidéos et textes, il est conseillé de tester et visualiser une petite partie de l'activité, pour évaluer si le résultat convient. * H5P accepte le LaTeX, il suffit d’insérer le code entre des double dollars. Ex : $$//code LateX//$$ \\ ---- ==Naviguer dans cet article : == Il existe 2 entités H5P, l'une "H5P noir", l'autre "H5P bleu" (cette dernière uniquement sur Madoc). Afin de n'offrir que les parties de l'article pertinentes à chaque situation, il est proposé une navigation via des liens : __Si vous utilisez Lumi,__ vous pouvez :\\ * [[https://wiki.univ-nantes.fr/doku.php?id=madoc:22-creer_des_ressources_interactives#creer_sauvegarder_et_modifier_une_activite_avec_lumi|1. Créer, sauvegarder et modifier une activité avec Lumi]] * [[https://wiki.univ-nantes.fr/doku.php?id=madoc:22-creer_des_ressources_interactives#publier_sur_madoc_une_activite_h5p_deja_creee_avec_la_banque_de_contenus_et_h5p_bleu|2. Publier sur Madoc une activité H5P déjà créée, avec la banque de contenus et H5P bleu]] * [[https://wiki.univ-nantes.fr/doku.php?id=madoc:22-creer_des_ressources_interactives#publier_sur_extradoc_avec_h5p_noir_une_activite_deja_creee|3. Publier sur Extradoc avec H5P noir, une activité déjà créée]]\\ __Si vous n'utilisez pas Lumi,__ vous pouvez : \\ * [[https://wiki.univ-nantes.fr/doku.php?id=madoc:22-creer_des_ressources_interactives#creer_publier_et_modifier_une_activite_h5p_sur_madoc_avec_la_banque_de_contenus_et_h5p_bleu|4. Créer, publier et modifier une activité H5P sur Madoc avec la banque de contenus et H5P bleu]] * [[https://wiki.univ-nantes.fr/doku.php?id=madoc:22-creer_des_ressources_interactives#creer_publicer_modifier_et_sauvegarder_une_activite_h5p_sur_extradoc_avec_h5p_noir|5. Créer, publicer, modifier et sauvegarder une activité H5P sur Extradoc avec H5P noir]] ---- ====1. Créer et modifier une activité avec Lumi==== ===1.1. Créer une activité=== - Ouvrir Lumi - Cliquer sur la tuile **Editer H5P** puis sur **créer un nouveau H5P** - Choisir l’activité souhaitée - Remplir les champs nécessaires (titre, description, licence Creative Commons via le bouton « beta données » le cas échéant, questions, propositions de réponses, textes, feedbacks, sons, images, vidéo, etc) propres à l’activité et à votre contenu - Enregistrer. **Attention !** Il n’y a dans la version actuelle pas de message à la fermeture pour demander s’il faut sauvegarder, par défaut, Lumi se ferme sans enregistrer les modifications. Il faut donc avoir le réflexe de **toujours sauvegarder la ou les activités h5p ouvertes dans Lumi, avant de fermer Lumi.**\\ L’enregistrement crée sur le disque dur de l’ordinateur, un fichier portant le nom donné à l’activité, avec l’extension .h5p. C’est ce fichier qui sera utilisé sur Madoc ou Extradoc. Chaque activité a ses caractéristiques et paramètres, mais de grands principes s'appliquent la plupart du temps dans le formulaire, avec des zones communes, pour lesquelles voici quelques indications :\\ * titre : il apparaîtra dans Madoc sous forme de lien pour cette activité * corps de l'activité : il comporte les éléments principaux nécessaires à l'activité (consignes, énoncés, réponses, etc). Attention, contrairement à Madoc, il n'est pas possible d'insérer des images dans l'éditeur de texte H5P. Lorsque des images ou autres types de fichiers sont prévus dans l'activité, des zones (boutons) spécifiques sont prévues * feedback général (activités évaluées) : c'est l'équivalent du Feedback global dans le Test Madoc, il est possible, par tranche de résultats, de fournir des feedbacks différenciés * paramètres comportementaux : ils permettent de décider de ce que l'étudiant pourra ou ne pourra pas faire par rapport à l'activité * options et textes : permet notamment de choisir la langue de l'interface, et éventuellement de renommer les boutons d'interaction pour l'étudiant.\\ ===1.2. Modifier une activité avec Lumi=== - Ouvrir le fichier H5P depuis le disque dur en double cliquant sur son nom. Il s’ouvre dans Lumi. - Opérer les modifications nécessaires - Enregistrer les modifications via le menu **fichier** puis **sauvegarder**, situé tout en haut à gauche de la fenêtre de l'application ====2. Publier sur Madoc une activité H5P déjà créée, avec la banque de contenus et H5P bleu==== ===2.1.La banque de contenus dans Madoc=== Pour publier une activité déjà créée dans un espace de cours Madoc, 2 étapes sont nécessaires : - déposer le fichier .h5p de l’activité dans la banque de contenus - créer une activité « H5P bleu » dans l’espace de cours, pour lier le fichier présent dans la banque de contenus et le présenter sur l’espace de cours ==2.1.1. Déposer un fichier .h5p== - Dans l’espace de cours, cliquer sur le bouton **Banque de contenus** dans le menu de gauche {{:madoc:img22_1.png?150}}\\ La banque de contenus s’ouvre : {{:madoc:img22_3.png?1000}} - Pour ajouter le fichier, cliquer sur le bouton (2) **Déposer** puis **Choisir un fichier** et à nouveau **Choisir un fichier** - Dans l’explorateur de fichiers qui s’est ouvert, sélectionner le fichier .h5p souhaité, puis cliquer sur le bouton **Ouvrir**, puis **Déposer ce fichier**, et enfin **Enregistrer**\\ Après quelques instants, l’activité H5P importée s’ouvre. Cliquer sur le bouton **Fermer** pour revenir à la vue générale de la banque de contenus.\\ NB : le bouton (1) sert à créer un nouveau contenu H5P (pour les non utilisateurs de Lumi) ==2.1.2. Gérer la banque de contenus== __Affichage des fichiers__\\ Il existe 2 présentations que l’on peut choisir à l’aide des boutons : bouton (3) de l'image ci-dessus, qui permet un affichage en icones et (4) qui permet un affichage en liste, avec plus d’indications, notamment combien de fois le fichier est utilisé dans l’espace de cours, la date de dernière modification dans la banque de contenu, etc.\\ __Modification__\\ Il est possible de modifier un fichier directement dans la banque de contenus, mais pour plus de cohérence il est recommandé de modifier le fichier du disque dur via Lumi, et de remplacer le fichier de la banque de contenus par le nouveau fichier modifié.\\ __Autres actions possibles :__\\ En cliquant sur un fichier de la banque de contenu, il s’ouvre et une roue crantée apparaît au coin supérieur droit de l’écran, sous le bandeau bleu Madoc.\\ **Attention, si le cours possède une image d’illustration, cette roue crantée peut être difficile à discerner.** \\ {{:madoc:img22_7.png?1000}}\\ Au clic, elle affiche les possibilités suivantes :\\ **(1)** Rendre non listé [impact non identifié actuellement]\\ **(2)** Renommer (il s’agit de renommer le fichier et non le titre de l’activité)\\ **(3)** Remplacer avec le fichier (notamment pour le cas d’un fichier modifié sur le disque dur avec Lumi. Si l’activité a été faite par certains étudiants avant le changement, l’historique des rapports de tentatives sur l’ancien fichier restera, et ne sera pas distingué des tentatives sur le nouveau fichier)\\ **(4)** Télécharger (pour récupérer par exemple un fichier publié par un autre enseignant du cours)\\ **(5)** Supprimer (attention, l’action est irréversible, l’activité ne sera pas récupérable dans la Corbeille)\\ ===2.2. Publier une activité H5P sur Madoc, à partir de la banque de contenus=== - Dans l’espace de cours, en mode édition, cliquer sur **Ajouter une activité ou ressource** dans la section souhaitée - Dans la fenêtre qui s’ouvre, cliquer sur l’icône portant le logo H5P bleu {{:madoc:img22_8.png?100}} - Renseigner le nom de l’activité qui va figurer sur la page de cours - Dans la zone **fichier de paquetage**, cliquer sur la flèche : dans la colonne de gauche, cliquer sur **Banque de contenus pour H5P**. Les fichiers apparaissent au milieu - Sélectionner le fichier à utiliser, puis sur le bouton **Sélectionner ce fichier**. Le fichier apparaît dans la zone "Fichier de paquetage" - Paramétrer ensuite les options Madoc proposées sous la zone de fichier, selon le souhait - Cliquer sur le bouton **Enregistrer et revenir au cours** ou sur le bouton **Enregistrer et afficher** pour visualiser l’activité\\ ====3. Publier sur Extradoc avec H5P noir, une activité déjà créée==== ===3.1. Créer une activité H5P=== - Se connecter au cours, - Activer le mode édition, - Dans la section choisie, cliquer sur le lien **Ajouter une activité ou ressource**, sélectionner **Contenu interactif** (avec logo H5P noir). Une fenêtre d'activité s'ouvre, avec les paramètres habituels d’Extradoc, ainsi qu'une zone spécifique à l'activité H5P, \\ Dans la fenêtre h5p qui s’ouvre {{:madoc:img22_9.png?800}}\\ - Cliquer sur **Téléverser** : la fenêtre change de configuration - Cliquer sur **Téléverser un fichier** : l’explorateur de fichiers de l’ordinateur s’ouvre - Sélectionner le fichier .h5p à insérer, puis cliquer sur **Ouvrir** ; le nom du fichier apparaît, ainsi que 2 bouton : * un bouton « modifier le fichier » à cliquer pour changer le fichier à utiliser, et * un bouton « utiliser » pour poursuivre - Cliquer sur le bouton **utiliser** : le fichier se charge et toutes les informations de l’activité apparaissent ===3.2. Paramétrer l'activité=== Une fois l’activité h5p « téléversée » :\\ * Remplir selon le souhait, les paramètres, propres à Extradoc. \\ //Recommandation :// décocher la première case dans le sous-menu « Afficher les options ». Ainsi cela évitera aux étudiant de pouvoir télécharger le module. Il est possible néanmoins de cocher la première case et seulement la case « bouton copyright », s’il est important que les étudiants aient accès aux données de droit d’auteur de l’activité.\\ Ces informations sont à insérer dans le cadre H5P, tout en haut de l’activité, à côté du titre, via le bouton-flèche **Métadonnées**\\ * Cliquer sur le bouton **Enregistrer et revenir au cours**, ou **Enregistrer et afficher** pour visualiser l’activité.\\ ===3.3. Modifier l’activité H5P=== Il existe 2 possibilités au moins : \\ * Si l’activité a été créée avec Lumi, ou si l’enseignant possède Lumi, la recommandation est de faire la modification sur le fichier du disque dur, puis de remplacer le fichier dans l’activité H5P en ouvrant celle-ci, puis en reprenant la procédure du 3.1. à partir du (1). * Si l’activité n’est pas sur le disque dur, ou Lumi non installé, ou en cas de besoin de modifier l’activité très rapidement : ouvrir l’activité H5P en cliquant sur son lien ; faire les modifications dans la page proposée ; enregistrer.\\ Pour créer et/ou modifier un contenu via H5P bleu (recommandation pour Madoc), il est nécessaire de passer par la banque de contenus. Le contenu sera ensuite lié à l’espace de cours via l’activité H5P bleu. ====4. Créer, publier et modifier une activité H5P sur Madoc avec la banque de contenus et H5P bleu==== ===4.1. Créer un nouveau contenu H5P bleu via la banque de contenus=== * Aller dans l’espace de cours Madoc, et activer le mode édition * Dans le bandeau à gauche de la page, cliquer sur **Banque de contenus**, la page suivante s’affiche : {{:madoc:img22_10.png?800}} * Cliquer sur le bouton « Ajouter » : une boîte à liste s’ouvre, développant les types d’activités H5P * Sélectionner l’activité souhaitée : la page spécifique à l’activité s’ouvre * Remplir les champs nécessaires (titre, description, licence Creative Commons via le bouton « beta données » le cas échéant, questions, propositions de réponses, textes, feedbacks, sons, images, vidéo, etc) propres à l’activité et à au contenu * Cliquer sur le bouton **Enregistrer** : l’activité s’affiche en mode lecture (il peut alors être visualisé et testé) * Cliquer sur le bouton **Fermer** : la page de la banque de contenus s’affiche, et le fichier, avec une icône apparaît. ===4.2. Publier le contenu dans l’espace de cours avec l’activité H5P bleu=== * Dans l’espace de cours, en mode édition, cliquer sur **Ajouter une activité ou ressource** dans la section souhaitée * Dans la fenêtre qui s’ouvre, cliquer sur l’icône H5P bleue {{:madoc:img22_8.png?100}} * Renseigner le nom de l’activité qui va figurer sur la page de cours * Dans la zone "fichier de paquetage", cliquer sur la flèche : une nouvelle fenêtre s'ouvre, cliquer dans la colonne de gauche sur **Banque de contenus pour H5P**, les fichiers apparaissent au milieu * Sélectionner le fichier à utiliser, puis cliquer sur le bouton **Sélectionner ce fichier**. Le fichier apparaît ensuite dans la zone "fichier de paquetage" * Paramétrer les options proposées sous la zone de fichier, selon le souhait * Cliquer sur le bouton **Enregistrer et revenir au cours**, ou sur le bouton **Enregistrer et afficher** pour visualiser l’activité ===4.3. Gérer la banque de contenus (modifier, supprimer…)=== __Affichage des fichiers__\\ Il existe 2 présentations que l’on peut choisir à l’aide des boutons : {{:madoc:img22_4.png?50}} qui permet un affichage en icones et {{:madoc:img22_5.png?50}} qui permet un affichage en liste, avec plus d’indications, notamment combien de fois le fichier est utilisé dans l’espace de cours, la date de dernière modification dans la banque de contenus…\\ __Modification__\\ Il est possible de modifier un fichier directement dans la banque de contenus : cliquer sur le fichier et effectuer les modifications avant d’enregistrer. A noter que les modifications d’un fichier de la banque de contenus, lié dans un cours, seront répercutées instantanément dans le cours et visibles par les étudiants. \\ __Autres actions possibles :__\\ En cliquant sur un fichier de la banque de contenus, il s’ouvre et une roue crantée apparaît au coin supérieur droit de l’écran, sous le bandeau bleu Madoc. \\ **Attention, si le cours possède une image d’illustration, cette roue crantée peut être difficile à discerner.** \\ {{:madoc:img22_7.png?800}}\\ Au clic, elle affiche les possibilités suivantes : \\ **(1)** Rendre non listé [impact non identifié actuellement]\\ **(2)** Renommer [il s’agit de renommer le fichier et non le titre de l’activité]\\ **(3)** Remplacer avec le fichier [notamment pour le cas d’un fichier modifié sur le disque dur avec Lumi. Si l’activité a été faite par certains étudiants avant le changement, l’historique des rapports de tentatives sur l’ancien fichier restera, et ne sera pas distingué des tentatives sur le nouveau fichier (sauf à connaître la date de la modification)]\\ **(4)** Télécharger (pour récupérer par exemple un fichier publié par un autre enseignant du cours)\\ **(5)** Supprimer (attention, l’action est irréversible, l’activité ne sera pas récupérable dans la Corbeille)\\ ===4.4. Sauvegarder sur le disque dur une activité anciennement créée sur Madoc avec H5P noir=== * Cliquer sur le menu **Modifier** puis **paramètres** au bout à droite de la ligne de l’activité * En bas de page, dans le menu « Afficher les options », cocher les cases **Afficher la barre d’action et le cadre** et **Autoriser le téléchargement**, puis **Enregistrer et afficher** * Cliquer sur menu **Réutiliser** situé sous l’activité, puis remonter la page et cliquer sur « Download as an .h5p file ». {{:madoc:img22_11.png?300}} \\ Le téléchargement s’effectue dans le dossier « téléchargements » de l’ordinateur. * Retourner dans les paramètres de l’activité pour décocher la case de téléchargement pour ne plus permettre le téléchargement de l’activité (notamment par les étudiants qui pourraient ainsi accéder aux réponses). ====5. Créer, publier, modifier et sauvegarder une activité H5P sur Extradoc avec H5P noir==== ===5.1. Créer une activité H5P=== * Se connecter au cours, et activer le mode édition. * Dans la section choisie, cliquer sur le lien **Ajouter une activité ou ressource**, * Sélectionner **Contenu interactif** (avec logo H5P noir).\\ Une fenêtre d'activité s'ouvre, avec les paramètres habituels d’Extradoc, ainsi qu'une zone spécifique à l'activité H5P. ===5.2. Paramétrer l'activité=== Remplir le formulaire avec les éléments nécessaires pour les consignes, questions, les propositions de réponses le cas échéant, images, sons et/ou vidéos en fonction du type d'activité.\\ Pour perspective : \\ Chaque activité possède ses caractéristiques et paramètres, mais de grands principes s'appliquent la plupart du temps dans le formulaire, avec des zones communes, pour lesquelles voici quelques indications :\\ * titre : il apparaîtra dans Madoc sous forme de lien pour cette activité * corps de l'activité : il comporte les éléments principaux nécessaires à l'activité (consignes, énoncés, réponses, etc). Attention, contrairement aux activités Extradoc, il n'est pas possible d'insérer des images dans l'éditeur de texte H5P. Lorsque des images ou autres types de fichiers sont prévus dans l'activité, des zones (boutons) spécifiques sont prévues * feedback général (activités évaluées) : c'est l'équivalent du Feedback global dans le Test Extradoc, il est possible, par tranche de résultats, de fournir des feedbacks différenciés * paramètres comportementaux : ils permettent de décider de ce que l'étudiant pourra ou ne pourra pas faire par rapport à l'activité * options et textes : permet notamment de choisir la langue de l'interface, et éventuellement de renommer les boutons d'interaction pour l'étudiant.\\ Avant de terminer, d’autres paramètres, propres à Extradoc, sont disponibles, et à renseigner selon le souhait.\\ //Recommandation :// décocher la première case dans le sous-menu « Afficher les options ». Ainsi cela évitera aux étudiant de pouvoir télécharger le module (et d'accéder aux réponses). Il est possible néanmoins de cocher la première case et seulement la case « bouton copyright », s’il est important que les étudiants aient accès aux données de droit d’auteur de l’activité. Ces informations d'auteurs sont à insérer dans le cadre H5P, tout en haut de l’activité, à côté du titre, via le bouton-flèche **Métadonnées**\\ Une fois les données remplies dans la fenêtre H5P, et les paramètre souhaités sélectionnés, cliquer sur le bouton **Enregistrer et revenir au cours**, ou **Enregistrer et afficher** pour visualiser l’activité.\\ ===5.3. Modifier l’activité H5P=== Pour modifier l’activité elle-même ou ses paramètres,\\ * Cliquer sur le menu « Modifier » au bout à droite de la ligne de l’activité concernée, puis sur **Paramètres** ; La page de modification s’affiche\\ * Effectuer les modifications nécessaires * Enregistrer ===5.4. Sauvegarder sur le disque dur une activité créée sur Extradoc avec H5P=== * Cliquer sur le menu **Modifier** puis **paramètres** au bout à droite de la ligne de l’activité * En bas de page, dans le menu « Afficher les options », cocher les cases **Afficher la barre d’action et le cadre** et **Autoriser le téléchargement**, puis **Enregistrer et afficher** * Cliquer sur menu **Réutiliser** situé sous l’activité, puis remonter la page et cliquer sur « Download as an .h5p file ». {{:madoc:img22_11.png?300}} \\ Le téléchargement s’effectue dans le dossier « téléchargements » de l’ordinateur. * Retourner dans les paramètres de l’activité pour décocher la case de téléchargement pour ne plus permettre le téléchargement de l’activité (notamment par les étudiants qui pourraient ainsi accéder aux réponses). ==== Pour aller plus loin ==== - L'espace Demomadoc propose des informations complémentaires : https://madoc.univ-nantes.fr/course/view.php?id=23889§ion=28 - Il est possible, pour une activité H5P déjà produite, de : * la dupliquer * la sauvegarder sur son disque dur * l'intégrer au moyen du lien iframe (h5p noir) et de l'éditeur de texte de Madoc, en mode html ; ou (pour H5P bleu dans la banque de contenus), via le bouton H5P de l'éditeur de texte. * Consulter les données d'apprentissage des étudiants (simplifié et via l'activité, dans le cas de H5P Bleu ; via le carnet de notes pour le H5P noir) Pour plus de détails et tutoriels (en anglais) sur la création des différents types de ressources, suivre ce lien : https://h5p.org/reuse-h5p-content ---- **[[moodle:faq|Retour à la FAQ]]**\\ **[[:madoc|Retour au guide de l'utilisateur Madoc]]**