11.5 Contenu H5P dans bookdown
Nous avons déjà vu que le contenu H5P s’affiche dans un iframe dans un document principal. Il lui transmet les évènements xAPI, et c’est donc ce document principal qui doit les traiter. Nous avons ici une impossibilité à le faire si nous sommes dans un cas où H5P est servi par un serveur différent que notre bookdown. En effet, les accès en “Cross-Origin Resource Sharing” ou CORS sont restreintes pour éviter des attaques de site évidentes. Ainsi un iframe issu d’un serveur différent de la page qui l’héberge ne peut communiquer librement avec la page qui le contient si elle provient d’un site différent. Or, nous avons besoin de cette communication pour transmettre les événements xAPI…
La solution que nous avons trouvée est d’ajouter le dossier qui contient nos pages statiques du bookdown à Wordpress directement. Ainsi les deux sont maintenant servis à partir de la même adresse. Une fois que c’est fait, l’inclusion d’applications H5P dans le bookdown est facile. Il suffit d’utiliser la fonction h5p() de {learnitdown} en indiquant juste le numéro ID de l’application H5P tel qu’affiché dans le tableau de bord de Wordpress avec un code du type learnitdown::h5p(6, baseurl = "https://wp.sciviews.org") dans du code inline dans notre bookdown (ici, l’ID serait ‘6’, ce qui correspond à l’application H5P nommée “drag-words” dans la copie d’écran ci-dessous). On peut éventuellement repréciser width =ou height = pour changer la taille de l’iframe hébergeant l’application H5P.
Pour comprendre ce que la fonction learnitdown::h5p() fait, nous pouvons nous concentrer sur la version simplifiée suivante :
h5p <- function(id, width = 780, height = 500) {
glue::glue("\n<iframe src=\"https://wp.sciviews.org/wp-admin/admin-ajax.php?action=h5p_embed&id={id}\" width=\"{width}\" height=\"{height}\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" class=\"h5p\"></iframe><script src=\"https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js\" charset=\"UTF-8\"></script>\n")
}La fonction construit un fragment HTML qui ajoute un iframe et un script pour gérer l’inclusion du contenu H5P dans notre bookdown. A partir d’ici, ajouter un contenu H5P est aussi simple que d’ajouter h5p(id) dans du code R en ligne où “id” est l’ID que nous avons noté. On peut aussi jouer sur les arguments width= et height= pour ajuster l’emplacement et la taille du contenu H5P dans la page.
Ainsi programmé notre contenu H5P se comporte comme suit :
pour un utilisateur enregistré dans Wordpress, les évènements xAPI sont enregistrés à son nom. Nous pouvons donc suivre la progression de nos étudiants via les contenus H5P parsemés dans le bookdown également, en plus des applis Shiny et des learnrs. De plus, l’état d’achèvement de l’exercice est aussi enregistré pour un bon nombre de contenus H5P et rétabli lorsque la page est rechargée par le même utilisateur.
pour un utilisateur non enregistré, les contenus H5P fonctionnent normalement, mais aucun évènement xAPI n’est enregistré, et l’état de complétude de l’exercice n’est pas conservé non plus. Si la page est rechargée, les contenus H5P retournent à leur état initial à chaque fois.
Ceci est un inconfort mineur pour un utilisateur anonyme et permet l’utilisation des contenus H5P de manière optimale pour nos étudiants dûment enregistrés, tout en permettant une libre utilisation par d’autres visiteurs sans polluer notre base de données.
Nous avons également tenté de passer des arguments supplémentaires via l’URL qui lance la page bookdown, et qui les transfère vers l’iframe H5P, mais sans succès car apparemment Worpress réécrit l’URL et laisse tomber ces arguments supplémentaires. Mais de toutes façons, ce n’est pas important pour l’instant car nous pouvons tracer nos utilisateurs enregistrés dans Wordpress telle que c’est actuellement implémenté.
11.5.1 Gestion des contenus H5P
Chaque contenu H5P est indépendant du reste. Attention que les contenus complexes sont volumineux. Par exemple, les vidéos interactives occupent chacune 2,8Mo sur le serveur lorsque les vidéos sont sur Youtube (donc, occupation de place minimale puisque la vidéo elle-même n’est pas directement dans le site Wordpress).
Au départ, aucun contenu n’est réalisable car les librairies nécessaires ne sont pas encore installée. Heuresuement, il ne faut pas les installer manuellement. Il suffit de téléverser du contenu pour que leur installation se fasse automatiquement (mais si de nouvelles librairies sont nécessaires, il faut alors le faire avec le compte admin de Wordpress). Donc, la procédure pragmatique suivante est retenue pour enrichir le site des librairies nécessaire :
- Pour un type de contenu qui n’est pas encore supporté, aller sur h5p.org. Se connecter (créer un compte gratuit, si nécessaire).
- Aller dans “Examples and Downloads” et choisir un exemple de type de contenu souhaité. Cliquer sur “Reuse”. Ou alors aller dans “Contents” -> “Create New Content” et créer un contenu du type souhaité. Puis cliquer sur “Reuse” lorsqu’on est satisfait du contenu.
Voici un exemple avec le contenu de type “True/False”.
Ensuite, dans le tableau de bord de Wordpress (en ayant pris soin de s’être enregistré comme administrateur), aller dans H5P Content -> Add New. Sélectionner “Téléverser” et indiquer le fichier .h5p que l’on vient de sauver, puis “Utiliser”.
Une fois que c’est fait, non seulement le contenu est téléversé, mais les librairies requises sont également ajoutées. De cette façon, un autre contenu de ce type peut maintenant être créé directement depuis la tableau de bord de Wordpress, H5P content -> Add New par n’importe quel utilisateur qui a les droits d’édition sur le site (donc, les enseignants).
11.5.2 Backup H5P
Le backup du site entier Wordpress est effectué. Par contre, il est utile d’avoir une copie des différents contenus H5P au format de fichier .h5p. Pour cela, un administrateur de site doit au préalable temporairement cocher l’option “Toolbar Below Content” dans les paramètres du plugin H5P de Wordpress (tableau de bord), de sorte que le bouton “Reuse” apparaisse en dessus d’un contenu H5P. Pour chaque contenu que l’on souhaite sauvegarder, l’afficher, et cliquer sur son bouton “Reuse” pour récupérer le fichier .h5p. Ensuite, placer les fichiers .h5p à l’emplacement de backup désiré.
TODO: une solution de récupération automatisée des fichiers .h5p d’un site devrait être développée à la place, la procédure décrite ci-dessus ne devrait être utilisée que ponctuellement pour récupérer un petit nombre de contenus H5P.
11.5.3 Gestion des événements xAPI
Pour les enseignants, les évènements xAPI générés par H5P (voir 6) qui n’ont pas pu être enregistrés dans la base de données MongoDB Atlas dédiée pour une raison ou une autre sont accessibles à partir du tableau de bord de Wordpress dans la section H5PxAPIkatchu. De là, ils peuvent être exportés au format CSV, et réinjectés dans MongoDB à l’aide d’un peu de code R. TODO: H5PxAPIkatchu ne fournit pas la date et l’heure de chaque évènement via ce tableau, mais l’enregistre dans la base de données MySQL avec une précision de la seconde. Il faudra peut-être un accès directe à cette base de données pour récupérer l’information complète dans ce cas. Dans MongoDB Atlas, cette information est enregistrée, par contre, avec une précision de la milliseconde.
Download permet de récupérer le tableau filtré au format CSV. Le lien Delete permet de tout effacer et n’est disponible que pour un administrateur du site.