06-H5p.Rmd

# H5P {#h5p}

```{r setup, include=FALSE, echo=FALSE, message=FALSE, results='hide'}
knitr::opts_chunk$set(comment = '#', fig.align = "center")
#SciViews::R
```

[H5P](https://h5p.org/) permet de "créer, partager et réutiliser du contenu interactif HTML5 dans un browser Web", d'après la page d'introduction du site Web. Il s'agit d'un ensemble de contenus HTML5 (html + css + javascript) permettant d'afficher et d'interagir avec des exercices et des présentations sous plusieurs formes. Plus de 40 contenus différents sont disponibles. H5P est distribué sous forme de logiciel libre (gratuit et Open Source) qu'il est possible d'installer sur son propre serveur. De plus, [h5p.org](https://h5p.org/user/register?destination=welcome-to-the-h5p-community) propose l'hébergement de contenus gratuits **à des fins de test uniquement**, et offre en complément une formule payante sur [h5p.com](https://h5p.com/), mais le tarif n'est pas renseigné.

Dans cette section, nous reprendrons les choix techniques, l'installation, la configuration et le déploiement de H5P dans le cadre de nos cours de science des données à l'UMONS, ainsi que les principaux contenus H5P qui sont disponibles.

## Installation de H5P

H5P ne peut fonctionner seul. Il doit être inclus dans un serveur plus large, soit un LMS (Learning Management System ou plateforme d'apprentissage en ligne comme), soit un CMS (Content Management System, système de gestion de contenu).

L'un des LMS les plus populaires est [Moodle](https://moodle.com/fr/) qui a été choisi à l'UMONS comme [outil institutionnel d'apprentissage en ligne](http://moodle.umons.ac.be/). H5P est compatible avec Moodle (il peut être installé comme plugin). Ce serait donc parfaitement logique de l'utiliser de cette manière. Un  test avait été fait en 2019. Si cela fonctionne, nous avons pu constater que le contenu H5P n'est **pas** utilisable ailleurs que dans Moodle lui-même, en tous cas de la façon dont le serveur test était configuré, avec les sécurités nécessaires pour protéger le site. Or, notre souhait est d'intéger le contenu H5P dans un bookdown qui ne peut être hébergé sur Moodle^[D'un point de vue technique, le contenu H5P s'affiche dans un iframe. Or les possibilités des iframes inter-sites sont limitées par le protocole HTML5 sous-jacent lui-même pour éviter les abus. Il nous faut donc le bookdown (pages statiques) et le contenu H5P (devant être lié à un serveur LMS ou CMS) servis par le *même* site.]. L'essai qui a été réalisé à l'UMONS en 2019 n'a pas été concrétisé dans le serveur Moodle en production. Or, il nous fallait intégrer du contenu H5P dans nos bookdown, et ce, dès 2020-2021. Donc, nous avons recherché une autre option.

Cette autre option consiste à utiliser soit [Wordpress](https://fr.wordpress.com/), soit [Drupal](https://www.drupal.org/) pour lesquels H5P est également compatible. Après comparaison des possibilités des deux, nous avons opté pour Wordpress, plus largement utilisé.

H5P permet de récupérer des informations concernant l'activité des étudiants dans les exercices sous forme de requêtes [xAPI](https://xapi.com/overview/). xAPI est un standard développé pour permettre l'interaction entre un LMS comme Moodle qui produit des évènements xAPI, et un LRS (Learning Record Store) une base de données chargée d'enregistrer les traces de l'apprentissage au format standardisé xAPI. En complément de H5P lui-même et de Wordpress comme serveur principal, il nous faut donc un LRS et un plugin qui fasse le pont entre H5P et ce LRS. Enfin, l'information n'est utile que si elle est identifiable comme provenant d'un étudiant en particulier. Le serveur doit donc gérer l'authentification des utilisateurs et transmettre l'identité de l'étudiant au travers de la requête xAPI. Si tout cela parait très compliqué, voici un petit schéma qui résume l'ensemble (à noter que nous avons choisi l'authentification via GitHub parce que nos étudiants ont également d'autres activités sur GitHub/GitHub Classroom, et il est dès lors plus facile de gérer une identité commune à toutes ces activités, même si l'identité UMONS est, hors contexte, la plus logique ici)\ :

![H5P et bookdown sont intégrés dans le même serveur Wordpress, ce qui permet l'affichage en iframe sans contraintes. Les informations de l'utilisateur proviennent d'une authentification GitHub, plus des données issues de Moodle via URL ou LTI. L'activité des étudiants H5P peut ainsi être enregistrée dans le LRS de notre choix via le protocole standard xAPI avec une identification univoque.](images/h5p/h5p-general.png)

### Installation du plugin H5P

Une fois le serveur Wordpress opérationnel, l'installation de H5P lui-même est vraiment très simple (voir aussi [la page d'installation Wordpress de H5P](https://h5p.org/documentation/setup/wordpress)).

- Connection au serveur Wordpress en temps qu'administrateur,

- Aller dans le tableau de bord -> Extensions -> Ajouter.

- Dans le champ de recherche, introduire "H5P",

- Sélectionner "Interactive content - H5P". Cliquer "Installer", puis "Activer".

C'est fait\ ! H5P est installé, mais aucune forme de contenu n'est encore disponible. H5P conseille d'installer des **librairies** de contenu. A partir du tableau de bord, cela se fait via "H5P Content -> Libraries". Cependant, cela n'apparaît pas nécessaire en pratique car lorsqu'on importe du contenu H5P dans le site, les librairies nécessaires sont automatiquement importées également... plus d'explications ci-dessous.

### Configuration de H5P

Le panneau de configuration est accessible pour l'administrateur Wordpress depuis le tableau de bord -> Réglages -> H5P. Voici une copie d'écran de la configuration choisie.

![Tableau de configuration du plugin H5P dans Wordpress.](images/h5p/h5p-configuration.png)
 
- La barre d'outils H5P en dessous du contenu est désactivée par défaut ("Controlled by author" non coché). Cette barre d'outils permet le partage et la réutilisation de contenu. Nous la garderions bien activées, mais le bouton de réemploi doit apparemment être activé pour que l'inclusion dans un bookdown soit possible. Or, si ce bouton est activé, tout le monde peut inclure le contenu dans d'autres sites... et impacter notre quotas d'utilisation de requêtes. Nous ne le souhaitons bien évidemment pas. *Pour récupérer un contenu sous forme de fichier .h5p, il faut réactiver cette option temporairement dans le tableau de bord, et seul l'administrateur du site peut le faire (voir Gestion des contenus H5P plus loin).*

- Les résultats utilisateurs ("Log results..." est coché) permet d'avoir des statistiques de base utilisateur par utilisateur sur les H5P. C'est utile, mais il faudra voir à terme l'impact sur l'espace disque utilisé pour cette fonction.

- La sauvegarde du contenu ("Allow logged-in users to resume tasks") est activée et utile puisqu'elle permet la mémorisation d'une session à l'autre des sélections dans les contenus H5P pour les utilisateurs enregistrés.

- "Show toggle switch for others' H5P contents" n'est pas très clair pour moi. Je l'ai laissé pour l'instant sur "Yes, show all contents by default". Est-ce qu'il s'agit de voir le contenu *crée* par d'autres utilisateurs\ ? Si, oui, c'est ce qu'on veut (les étudiant utilisent le contenu créé par les profs).

- "Add content method" est réglé sur "id".

- L'option suivante, "Enable LRS dependent content types" est importante et doit être coché pour pouvoir enregistrer l'activité via xAPI (voir plus loin).

- Les deux dernières options sont en relation avec la gestion et le développement H5P. Nous les laissons cochées ("Use H5P Hub" et "Automatically contribute usage statistics").

## Enregistrement H5P xAPI

Une fois le plugin H5P installé, il nous faut encore permettre l'enregistrement des activités des étudiants. Nous l'avons déjà vu, cette possibilité est prévue dans H5P et le protocole standardisé xAPI est utilisé, ce qui le rend compatible avec les LRS du marché. Dans Wordpress, nous avons deux options\ :

1. Un enregistrement *local* dans la base de données MySQL de Wordpress directement sur le serveur avec le plugin Wordpress **H5PxAPIkatchu**, voire une modification de ce plugin pour l'enregistrement dans une base de données généraliste, comme MongoDB,
2. Un enregistrement dans un LRS spécialisé xAPI avec le plugin Wordpress **wp-h5p-xapi**.

Nous allons aborder et discuter ces deux options tour-à-tour.

### H5PxAPIkatchu

Ce plugin est facile à installer puisqu'il est disponible depuis Wordpress plugins. La procédure est la même que pour l'installation de H5P lui-même (l'administrateur va dans la partie installation d'extension du tableau de bord, rentre "H5PxAPI" dans la zone de recherche, sélectionne l'item et clique "Installer" puis "Activer"). Ce plugin est gratuit et il semble bien maintenu^[J'ai fait une proposition de pull request à l'auteur qui a répondu immédiatement.].

La configuration est également extrêmement simple.

![Configuration de H5PxAPIkatchu.](images/h5p/h5pikatchu-config.png)

Comme nous souhaitons récolter un maximum d'information sur l'activité des étudiants, et voulons récupérer le contenu xAPI intact, nous cochons "Store complete statements" et "Capture everything". L'option "Debug" n'est pas nécessaire et peut rester décochée.

Une fois cette configuration effectuée, l'activité H5P est enregistrée directement dans la base de données MySQL de Wordpress. Cette base de données n'est pas disponible de l'extérieur dans notre configuration (le fournisseur verrouille les bases de données pour un accès local uniquement par sécurité). Par contre, H5PxAPIkatchu permet de visualiser un tableau avec les données, de le filtrer, et de récupérer le résultat sous forme de fichier CSV avec le bouton "Download" (le lien "Delete" permet d'effacer le contenu et n'est disponible que pour l'administrateur du site).

![Contenu xAPI enregistré par H5PxAPIkatchu. L'utilisateur est correctement identifié dans le tableau enregistré.](images/h5p/h5pikatchu-results.png)

Et c'est tout\ ! Pas besoin de LRS, pas besoin de configuration à rallonge... par contre, cela ne convient que pour du *dépannage*. En effet, l'accès aux données n'est pas possible pour, par exemple, générer les rapports de progression des étudiants. L'extraction sous forme CSV doit se faire *manuellement*\ !

Après l'enthousiasme suite à un premier essai d'enregistrement de l'activité réussie lorsque le contenu H5P est utilisé directement dans Wordpress (à partir d'une page Wordpress ou du tableau de bord), nous faisons face à une déception quand nous constatons que cela ne **fonctionne pas dans le bookdown\ !** Pourtant, nous avons bien installé notre bookdown dans le *même* serveur que Wordpress/H5P pour permettre une communication fluide... alors, pourquoi ça ne fonctionne toujours pas\ ? En fait, nous devons nous plonger dans les détails de l'implémentation pour comprendre que ce n'est **pas** H5P lui-même qui effectue l'enregistrement, mais la page dans laquelle le contenu est inclus. Autrement dit, notre brave bookdown en pages statiques va se voir déléguer le travail. Le schéma suivant explique le détail de l'implémentation.

![Pour des raisons de sécurité, l'enregistrement de l'événement xAPI se fait "server-side" par du code PHP dans H5PxAPIkatchu. Par contre, H5P ne communique jamais lui-même avec le LRS, mais délègue cette tâche à la page parent qui l'héberge (ce qui ne fonctionne que si les deux sont issus du même domaine). Donc, notre bookdown va devoir effectuer le transfert de l'événement xAPI via une requête AJAX sur le serveur (partie en rouge) qui manque actuellement.](images/h5p/h5p-xapi.png)

Moralité, pour que notre bookdown enregistre les événements H5P, il faut lui adjoindre le code en Javascript nécessaire pour faire le transfert. Ce code est repris et adapté de H5P lui-même, ainsi que de H5PxAPIkatchu. Ce code est inclus dans le fichier `header.html` qui est inclus dans le bookdown grâce à ceci dans `index.Rmd`\ :

```yaml
output:
  bookdown::gitbook:
    includes:
      in_header: header.html
```

Tout d'abord, la partie H5P de configuration. La partie **H5PIntegration** est normalement générée à partir de Wordpress, mais comme nous utilisons des pages statiques dans bookdown, nous le copions tel quel ici. Comme elle contient des informations contextuelles liées au site et à l'installation de H5P, nous devrons récupérer cela autrement afin d'avoir une version à jour, mais pour l'instant, ça fonctionne comme cela. Voici ce que cela donne\ :

```html
<!-- Required for H5P xAPI feedback -->

<script>H5PIntegration = {"baseUrl":"https:\/\/wp.sciviews.org","url":"\/wp-content\/uploads\/h5p","postUserStatistics":false,"ajax":{"setFinished":"https:\/\/wp.sciviews.org\/wp-admin\/admin-ajax.php?token=e6b10366a6&action=h5p_setFinished","contentUserData":"https:\/\/wp.sciviews.org\/wp-admin\/admin-ajax.php?token=ea1774d67b&action=h5p_contents_user_data&content_id=:contentId&data_type=:dataType&sub_content_id=:subContentId"},"saveFreq":"30","siteUrl":"https:\/\/wp.sciviews.org","l10n":{"H5P":{"fullscreen":"Fullscreen","disableFullscreen":"Disable fullscreen","download":"Download","copyrights":"Rights of use","embed":"Embed","size":"Size","showAdvanced":"Show advanced","hideAdvanced":"Hide advanced","advancedHelp":"Include this script on your website if you want dynamic sizing of the embedded content:","copyrightInformation":"Rights of use","close":"Close","title":"Title","author":"Author","year":"Year","source":"Source","license":"License","thumbnail":"Thumbnail","noCopyrights":"No copyright information available for this content.","reuse":"Reuse","reuseContent":"Reuse Content","reuseDescription":"Reuse this content.","downloadDescription":"Download this content as a H5P file.","copyrightsDescription":"View copyright information for this content.","embedDescription":"View the embed code for this content.","h5pDescription":"Visit H5P.org to check out more cool content.","contentChanged":"This content has changed since you last used it.","startingOver":"You'll be starting over.","by":"by","showMore":"Show more","showLess":"Show less","subLevel":"Sublevel","confirmDialogHeader":"Confirm action","confirmDialogBody":"Please confirm that you wish to proceed. This action is not reversible.","cancelLabel":"Cancel","confirmLabel":"Confirm","licenseU":"Undisclosed","licenseCCBY":"Attribution","licenseCCBYSA":"Attribution-ShareAlike","licenseCCBYND":"Attribution-NoDerivs","licenseCCBYNC":"Attribution-NonCommercial","licenseCCBYNCSA":"Attribution-NonCommercial-ShareAlike","licenseCCBYNCND":"Attribution-NonCommercial-NoDerivs","licenseCC40":"4.0 International","licenseCC30":"3.0 Unported","licenseCC25":"2.5 Generic","licenseCC20":"2.0 Generic","licenseCC10":"1.0 Generic","licenseGPL":"General Public License","licenseV3":"Version 3","licenseV2":"Version 2","licenseV1":"Version 1","licensePD":"Public Domain","licenseCC010":"CC0 1.0 Universal (CC0 1.0) Public Domain Dedication","licensePDM":"Public Domain Mark","licenseC":"Copyright","contentType":"Content Type","licenseExtras":"License Extras","changes":"Changelog","contentCopied":"Content is copied to the clipboard","connectionLost":"Connection lost. Results will be stored and sent when you regain connection.","connectionReestablished":"Connection reestablished.","resubmitScores":"Attempting to submit stored results.","offlineDialogHeader":"Your connection to the server was lost","offlineDialogBody":"We were unable to send information about your completion of this task. Please check your internet connection.","offlineDialogRetryMessage":"Retrying in :num....","offlineDialogRetryButtonLabel":"Retry now","offlineSuccessfulSubmit":"Successfully submitted results."}},"hubIsEnabled":true,"reportingIsEnabled":true,"libraryConfig":null,"crossorigin":null,"crossoriginCacheBuster":null,"pluginCacheBuster":"?v=1.15.0","libraryUrl":"https:\/\/wp.sciviews.org\/wp-content\/plugins\/h5p\/h5p-php-library\/js","core":{"styles":["\/wp-content\/plugins\/h5p\/h5p-php-library\/styles\/h5p.css?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/styles\/h5p-confirmation-dialog.css?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/styles\/h5p-core-button.css?ver=1.15.0"],"scripts":["\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/jquery.js?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p.js?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-event-dispatcher.js?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-x-api-event.js?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-x-api.js?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-content-type.js?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-confirmation-dialog.js?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-action-bar.js?ver=1.15.0","\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/request-queue.js?ver=1.15.0"]},"loadedJs":[],"loadedCss":[],"contents":{"cid-7":{"library":"H5P.MultiChoice 1.14","jsonContent":"{\"answers\":[{\"correct\":false,\"tipsAndFeedback\":{\"tip\":\"\",\"chosenFeedback\":\"\",\"notChosenFeedback\":\"\"},\"text\":\"<div>The header of the document<\\\/div>\\n\"},{\"correct\":true,\"tipsAndFeedback\":{\"tip\":\"\",\"chosenFeedback\":\"<div>Excellent! A chunk is indeed a special area delimited by \\u0010\\u0010```{R} and ``` tags that contains R code to be evaluated in place when the document is compiled.<\\\/div>\\n\",\"notChosenFeedback\":\"<div>Oww! You should go back to the capsule about R Markdown to learn what a chunk is.<\\\/div>\\n\"},\"text\":\"<div>An area that contains R code<\\\/div>\\n\"},{\"correct\":false,\"tipsAndFeedback\":{\"tip\":\"\",\"chosenFeedback\":\"\",\"notChosenFeedback\":\"\"},\"text\":\"<div>A area that contains markdown text<\\\/div>\\n\"}],\"overallFeedback\":[{\"from\":0,\"to\":100}],\"UI\":{\"checkAnswerButton\":\"Check\",\"showSolutionButton\":\"Show solution\",\"tryAgainButton\":\"Retry\",\"tipsLabel\":\"Show tip\",\"scoreBarLabel\":\"You got :num out of :total points\",\"tipAvailable\":\"Tip available\",\"feedbackAvailable\":\"Feedback available\",\"readFeedback\":\"Read feedback\",\"wrongAnswer\":\"Wrong answer\",\"correctAnswer\":\"Correct answer\",\"shouldCheck\":\"Should have been checked\",\"shouldNotCheck\":\"Should not have been checked\",\"noInput\":\"Please answer before viewing the solution\"},\"behaviour\":{\"enableRetry\":true,\"enableSolutionsButton\":true,\"enableCheckButton\":true,\"type\":\"auto\",\"singlePoint\":true,\"randomAnswers\":true,\"showSolutionsRequiresInput\":true,\"confirmCheckDialog\":false,\"confirmRetryDialog\":false,\"autoCheck\":false,\"passPercentage\":100,\"showScorePoints\":true},\"confirmCheck\":{\"header\":\"Finish ?\",\"body\":\"Are you sure you wish to finish ?\",\"cancelLabel\":\"Cancel\",\"confirmLabel\":\"Finish\"},\"confirmRetry\":{\"header\":\"Retry ?\",\"body\":\"Are you sure you wish to retry ?\",\"cancelLabel\":\"Cancel\",\"confirmLabel\":\"Confirm\"},\"question\":\"<p>What is a chunk in R Markdown?<\\\/p>\\n\",\"media\":{\"disableImageZooming\":false}}","fullScreen":"0","exportUrl":"\/wp-content\/uploads\/h5p\/exports\/multiple-choice-7.h5p","embedCode":"<iframe src=\"https:\/\/wp.sciviews.org\/wp-admin\/admin-ajax.php?action=h5p_embed&id=7\" width=\":w\" height=\":h\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>","resizeCode":"<script src=\"https:\/\/wp.sciviews.org\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>","url":"https:\/\/wp.sciviews.org\/wp-admin\/admin-ajax.php?action=h5p_embed&id=7","title":"multiple-choice","displayOptions":{"frame":false,"export":false,"embed":true,"copyright":false,"icon":false,"copy":false},"metadata":{"title":"multiple-choice","license":"U"},"contentUserData":[{"state":"{}"}],"scripts":["\/wp-content\/uploads\/h5p\/cachedassets\/bbb484ab91a596c1d881578ee3d99ab92df05f05.js","https:\/\/wp.sciviews.org\/wp-content\/plugins\/h5pxapikatchu\/js\/h5pxapikatchu-listener.js?ver=0.4.2"],"styles":["\/wp-content\/uploads\/h5p\/cachedassets\/bbb484ab91a596c1d881578ee3d99ab92df05f05.css"]}}};</script><link rel='stylesheet' id='h5p-core-styles-h5p-css'  href='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/styles/h5p.css' media='all' />
<link rel='stylesheet' id='h5p-core-styles-h5p-confirmation-dialog-css'  href='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/styles/h5p-confirmation-dialog.css' media='all' />
<link rel='stylesheet' id='h5p-core-styles-h5p-core-button-css'  href='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/styles/h5p-core-button.css' media='all' />
<script src='https://wp.sciviews.org/wp-includes/js/wp-embed.min.js'></script>
```

Et c'est pas tout\ ! Il nous faut encore le code Javascript H5P et H5PxAPIkatchu\ :

```html
<script>
var wpAJAXurl = "https:\/\/wp.sciviews.org\/wp-admin\/admin-ajax.php";
var debugEnabled = "0";
var captureAllH5pContentTypes = "1";
var h5pContentTypes = [""];
window.H5PxAPIkatchu = {
	captureAllH5pContentTypes: captureAllH5pContentTypes,
	debugEnabled: debugEnabled,
	h5pContentTypes: h5pContentTypes,
	jQuery: jQuery,
	wpAJAXurl: wpAJAXurl
};
</script>
<script src='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/jquery.js'></script>
<script src='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/h5p.js'></script>
<script src='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-event-dispatcher.js'></script>
<script src='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-x-api-event.js'></script>
<script src='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-x-api.js'></script>
<script src='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-content-type.js'></script>
<script src='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-confirmation-dialog.js'></script>
<script src='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/h5p-action-bar.js'></script>
<script src='https://wp.sciviews.org/wp-content/plugins/h5p/h5p-php-library/js/request-queue.js'></script>
```

Voilà, avec tout cela, nous recompilons le bookdown, plaçons tout le contenu de `\docs` sur le serveur... et (après bien des essais et erreurs tout de même)... ça marche\ !

```{block2, type="warning"}
En dépis de sa simplicité, H5PxAPIkatchu ne convient *pas* tel quel pour l'objectif que nous poursuivons. Nous avons imaginé étendre le plugin pour enregistrer les données dans notre base de données MongoDB Atlas comme première solution. Cela a nécessité du développement PHP et l'utilisation d'une librairie PHP mongodb qu'il faut installer sur le serveur. Une autre solution consiste à utiliser un autre plugin et à passer par un véritable LRS. Ceci est envisagé dans le paragraphe suivant.
```

Il s'avère que, une fois l'incorporation du driver mongodb dans PHP effectuée (c'est en fait la partie la plus difficile), le code en PHP qu'il faut ajouter à H5PxAPIkatchu pour effectuer l'enregistrement dans notre base MongoDB est assez succinct. Une demande à l'auteur de [H5PxAPIkjatchu](https://github.com/otacke/h5pxapikatchu) pour permettre l'enregistrement des données ailleurs via une fonction PHP a été rapidement honorée. Ainsi, nous avons pu facilement écrire le code complémentaire pour enregistrer l'information dans notre base de données MongoDB ATLAS (ce code est placé dans la zone dédie du plugin **My custom functions**)\ :

```php
// Custom h5pxapikatchu data insertion
function h5pxapi_actor( $actor ) {
  global $doc;
  $doc['actor'] = $actor;
  return $actor;
}
add_filter( 'h5pxapikatchu_insert_data_actor', 'h5pxapi_actor' );

function h5pxapi_verb( $verb ) {
  global $doc;
  $doc['verb'] = $verb;
  return $verb;
}
add_filter( 'h5pxapikatchu_insert_data_verb', 'h5pxapi_verb' );

function h5pxapi_object( $object ) {
  global $doc;
  $doc['object'] = $object;
  return $object;
}
add_filter( 'h5pxapikatchu_insert_data_object', 'h5pxapi_object' );

function h5pxapi_result( $result ) {
  global $doc;
  $doc['result'] = $result;
  // Added by PhG
  // Note: 'time' is like recorded in MySQL, but truncated down to second
  //$doc['time'] = current_time( 'mysql' );
  $doc['date'] = current_time( 'Y-m-d H:i:s.u', $gmt = 1 );
  return $result;
}
add_filter( 'h5pxapikatchu_insert_data_result', 'h5pxapi_result' );

function h5pxapi_xapi( $xapi ) {
  global $doc;
  $doc['xapi'] = $xapi;
  return $xapi;
}
add_filter( 'h5pxapikatchu_insert_data_xapi', 'h5pxapi_xapi' );

//function h5pxapikatchu_custom_insert_data( $actor, $verb, $object, $result, $xapi ) {
function h5pxapi_custom_insert_data() {
  global $doc;
  $response = false;

  try {
    $manager = new MongoDB\Driver\Manager( 'mongodb://sdd-wordpress:Pseud0chr0mis-pacagnellae@sdd-umons-shard-00-00-umnnw.mongodb.net:27017,sdd-umons-shard-00-01-umnnw.mongodb.net:27017,sdd-umons-shard-00-02-umnnw.mongodb.net:27017/test?ssl=true&replicaSet=sdd-umons-shard-0&authSource=admin' );
    $bulk = new MongoDB\Driver\BulkWrite;
    //$doc = [
    //  'actor' => $actor,
    //  'verb' => $verb,
    //  'object' => $object,
    //  'result' => $result,
    // Added by PhG: 'time' => $time,
    //  'xapi' => $xapi,
    //];
    $bulk->insert( $doc );
    $result = $manager->executeBulkWrite( 'sdd.h5p', $bulk );
    $response = true;
  } catch (Throwable $e) {
	//echo "Catured Throwable: " . $e->getMessage() . PHP_EOL;
    // Manage error here...
  }
  if ($response) {
    wp_die();
  }
  return $response;
}
add_action( 'h5pxapikatchu_insert_data_pre_database', 'h5pxapi_custom_insert_data' );
```

Cela fonctionne, mais pour une utilisation plus robuste, il nous faudra passer les paramètres nécessaires à la requête AJAX sur Wordpress de manière dynamique à nos pages bookdown. C'est ce que nous avons implémenté dans le package R {learnitdown}, voir chapitre \@ref(bookdown).

### wp-h5p-xapi et LRS

L'autre plugin Wordpress qui permet d'enregistrer les événements xAPI est [wp-h5p-xapi](https://github.com/tunapanda/wp-h5p-xapi). Dans cette configuration, il nous faut un LRS. La plupart des solutions proposées sont commerciales, payantes et ... chères, sauf une\ : [Watershed](https://www.watershedlrs.com). Son utilisation comme LRS est **gratuite** et **sans limitations** ni du nombre d'utilisateurs, ni du nombre d'événements générés par mois. Ça semble presque incroyable, sauf si on comprend que c'est pour eux un produit d'appel vers leurs outils analytics qui effectuent des rapports sur le LRS, et qui sont eux, bien chers (minimum 1600$/mois)\ ! Mais nous, du moment qu'on puisse enregistrer nos événements xAPI et les récupérer dans R, on a tout ce qu'il nous faut. Donc, la solution complète envisagée passerait par wp-h5p-xapi et Watershed.

En allant sur leur site, on se rend compte qu'il n'est pas possible de créer un compte directement. Il faut envoyer une demande via un formulaire... et la réponse se fait attendre... indéfiniment\ ! De plus, autre déconvenue\ : le plugin Wordpress wp-h5p-xapi n'a pas reçu de commit depuis plus de 2 ans (7 avril 2018) et semble ne plus être conforme aux spécifications de Wordpress (voir [ici](https://wordpress.org/plugins/wp-h5p-xapi/)) de sorte qu'il n'est plus distribué par le site Wordpress plugins depuis le 31 octobre 2019 en raison de violation des lignes directrices de Wordpress... Ce n'est pas très encorageant.

### Autres plugins H5P

- Le même auteur de H5PxAPIkatchu propose aussi [H5P Resize Pulse](https://fr-be.wordpress.org/plugins/snordians-h5p-resize-pulse/) qui permet de régler un problème d'affichage apparemment de H5P dans certains containers. Dans les bookdowns, nous ne rencontrons pas de problèmes pour l'instant, mais c'est bon à savoir... Il propose aussi [H5P sharing](https://fr-be.wordpress.org/plugins/h5p-sharing/) pour obtenir aisément le code `<iframe>...</iframe>` d'un contenu H5P. Nous n'en avons pas besoin car la fonction `learnitdown::h5p()` remplit la même fonction dans R.

- [H5P CSS Editor](https://fr-be.wordpress.org/plugins/h5p-css-editor/) adapte le look de l'éditeur H5P à celui du site Wordpress, ... mais ce plugin n'a pas été mis à jour depuis plus de 3 ans. Nous ne l'avons pas testé.

- [Gamipress](https://gamipress.com/) est une solution Open Source et entièrement gratuite de gamification de sites Worpress (l'utilisateur est encouragé à utiliser le site en gagnant des points, des bagdes, un ranking des utilisateurs peut être affiché, etc.). Ils proposent aussi un plugin qui permet d'obtenir des points avec les [activités H5P](https://fr-be.wordpress.org/plugins/gamipress-h5p-integration/). Les badges et la gamification de l'apprentissage est une piste très intéressante que nous devrions développer pour stimuler nos étudiants. Donc, nous explorerons cette piste plus tard (voir aussi la section sur les badges dans le chapitre \@ref(moodle)).

### Solution finale choisie

Nous avons vu l'extrême complexité à faire fonctionner H5P/Wordpress avec bookdown. Cependant, nos développements ont abouti à une solution fonctionnelle via le plugin H5PxAPIkatchu paché, puis complété par son auteur. Nous avons donc décidé de finaliser cette implémentation de la façon suivante\ :

- Suite à un pull request, l'auteur de H5PxAPIkatchu a modifié son plugin pour permettre de faire appel à une fonction personnalisée pour enregistrer les évènements xAPI de H5P où bon nous semble. Nous l'utilisons via une fonction écrite en PHP dans Wordpress pour enregistrer ces informations dans MongoDB ATLAS, comme expliqué plus haut.

- Toute la machinerie Javascript nécessaire dans la page qui inclus un composant H5P dans un iframe est fournie au bookdown via l'extension dans le package R {[learnitdown](https://www.sciviews.org/learnitdown/)}. Ceci est discuté dans la section correspondante (voir chapitre \@ref(bookdown)).

## 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** sur le site Wordpress).

Au départ, aucun contenu n'est réalisable car les **librairies** nécessaires ne sont pas encore installée. Mais il n'est pas nécessaire de les installer car 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 dont nous avons besoin\ :

- Pour un type de contenu qui n'est pas encore supporté, aller sur [h5p.org](https://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".

![Dans son compte sur h5p.org aller dans "Contents" -> "Create New Content", et choisir le type de contenu que l'on veut créer (ici True/False question).](images/h5p/h5p-new-content1.png)

![Créer le contenu et l'enregister.](images/h5p/h5p-new-content2.png)

![Une fois le contenu terminé, il suffit de cliquer sur "Reuse" (flèche rouge) et de cliquer sur "Download as an .h5p file" pour récupérer le fichier .h5p.](images/h5p/h5p-new-content3.png)

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

![Ajout du contenu H5P sur le site Worpress par téléversement du fichier .h5p.](images/h5p/h5p-new-content4.png)

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

### Backup H5P

Le backup du site entier Wordpress est effectué. Par contre, il est utile d'avoir une copie de nos 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` sur p-Cloud dans le répertoire `sdd_h5p_backup`.

**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 ou un petit nombre de contenus H5P.

## Quelques contenus H5P utiles

[H5P](https://h5p.org/content-types-and-applications) propose plus d'une quarantaine de types de contenus différents. Tous ne sont pas utiles dans le contexte des cours de science des données, mais certains le sont particulièrement. Voici une petite sélection.

### Apprentissage du code R

Apprendre à coder en R, comme tout apprentissage de langage, nécessite du temps et de la persévérance. L'approche pas à pas, ludique et diversifiée est, en la matière, importante. H5P nous aide notamment avec les contenus suivants\ :

- [Advanced fill the blanks](https://h5p.org/advanced-fill-the-blanks). Il est plus facile au début de se focaliser sur des parties du code lorsqu'un example est décortiqué. Cependant, l'approche purement passive (l'étudiant suit une explication sur le code) n'est pas très fructueuse. L'étudiant doit être **actif** et forcé à **réfléchir**, tout en l'amenant en douceur à écrire *lui-même*  des (parties) de code. "Advanced fill the blanks" est parfait pour cela car il permet un feedback efficace pour aider l'étudiant dans son apprentissage. Ce genre de question pourrait également être envisagée dans une zone de code R d'un learnr, mais c'est plus lourd et à réserver à une phase ultérieure de l'apprentissage.

- S'il faut encore plus faciliter l'exercice, nous pourrions aussi suggérer des fragments de code à replacer au bon endroit, c'est ce que fait [Drag the words](https://h5p.org/drag-the-words). C'est en quelque sorte une version ultra-simplifiée de l'exercice de type "remplir les vides" puisque les solutions sont aussi suggérées sous forme de fragments de code à replacer au bon endroit.

- Pour varier, nous pourrions aussi proposer des bouts de code et poser ensuite une question simple sur ce code, à répondre par oui ou non, voir [True/False question](https://h5p.org/true-false).

- Pour l'apprentissage de la syntaxe R (où sont les variables, les fonctions, les arguments, les chaines de caractères, etc. dans du code), nous pouvons utiliser [Mark the words](https://h5p.org/mark-the-words).

### Apprentissage des graphiques

La visualisation des données impose de développer deux compétences en parallèle\ : (1) la faculté de déterminer quelle est la meilleure représentation graphique pour quelles données, et (2) la capacité à maitriser techniquement l'outil pour effectivement réaliser le graphique voulu. En plus de cela, il faut aussi que le graphique soit correct (libellé ou unité des axes présents, respect des conventions, pas de surcharges inutiles, etc.)

- Pour montrer les différentes parties importantes d'un graphique ou, par exemple, expliquer les différents éléments d'une boite de dispersion, l'[Image hotspots](https://h5p.org/image-hotspots) est idéal. C'est infiniment plus engageant qu'un graphique et une légende statiques.

- Le complément logique pour faire des exercices d’auto-évaluation sur le même thème, c’est le [Find multiple hotspots](https://h5p.org/find-multiple-hotspots).

- Le [Drag and drop](https://h5p.org/drag-and-drop) propose une alternative intéressante pour varier le type d'exercices consistant à identifier les parties importantes d'un graphique. 

- [Image juxtaposition](https://h5p.org/image-juxtaposition) permet de comparer deux solutions graphiques différentes d'une manière originale. Il est aussi possible de visualiser une variation sur un thème lié à un même graphique, par exemple,  deux palettes de couleurs différentes, ou l'utilisation de la couleur *versus* des symboles. Nous pouvons aussi imaginer avec cet outil comparer un modèle linéaire et un modèle polynomial, par exemple. 

### Explications générales

- Ici, les [Vidéos interactives](https://h5p.org/interactive-video) sont un must. Les étudiants étant immergés dans l'audiovisuel constamment, l'image animée est un canal de communication familier et habituel. Nous devons l'exploiter. Par contre, il est trop facile de regarder passivement une vidéo... et d'avoir l'*impression* d'avoir compris sans pourtant n'avoir rien assimilé. Parsemer des questions sur ce qui vient d'être visualisé dans la vidéo est un moyen extrêmement puissant pour faire prendre conscience que la lecture est passive. L'étudiant peut alors revenir en arrière et visionner plus attentivement dans le but de pouvoir répondre à la question. Ce faisant, il apprend, comprend et assimile bien mieux le contenu de la vidéo\ !

- Il ne faut pas négliger non plus le [Course presentation](https://h5p.org/presentation). Si les explications deviennent longues et les pages de texte interminables, ce n'est pas très engageant pour l'étudiant. La matière sous forme d'une présentation où des questions d'auto-évaluation sont directement incluses est un moyen très efficace de diversifier, casser la monotonie d'une longue explication textuelle, et plus engageant si la présentation est richement illustrée. Pour un exemple concret, si nous expliquons comment réaliser un test *t* de Student et en même temps que nous donnons les détails de calcul, cela fait trop. De plus, de part notre expérience, l'étudiant a ensuite du mal à faire la part des choses entre l'application du test dans R et les détails plus techniques du "comment ça marche en interne". Le texte devient aussi très (trop) long. Une solution est alors de se focaliser sur la résolution du test dans R uniquement sous forme de développement textuel, et réserver une présentation "comment le *t* test est calculé" pour les détails, et peut-être une autre présentation intitulée "les différents *t* tests" pour expliquer les différentes variantes.

### Autoévaluation

Les learnrs sont des outils de choix que nous appliquons avec succès pour l'autoévaluation des étudiants. Cependant, une autoévaluation plus rapide et plus proche du matériel pédagogique lui-même est encore plus efficace en première ligne (suivi en seconde ligne par des learnrs avec un niveau de difficulté supérieur, en troisième ligne des exercices guidés sur données réelles dans un projet RStudio *via* GitHub Classroom et enfin en quatrième ligne, des analyses à faire *via* GitHub Classroom mais avec un guidage minimal). Nous venons de voir que H5P permet cette autoévaluation directement à l'intérieur des vidéos et des présentations. Il nous manque l'équivalent pour les développements textuels. Les contenus suivants fournissent ce dont nous avons besoin à ce niveau.

- [Quizzs](https://h5p.org/question-set) permet de rassembler plusieurs questions successives en un contenu unique avec une note finale pour l'ensemble du genre 4/6 questions répondues correctement.

- Pour chaque question du quizz, voire des questions isolées parsemées dans le texte directement, nous avons différents contenus possibles\ : vrai/faux, choix unique ou [Multiple choice](https://h5p.org/multichoice).

- Pour une variation plus ludique des questions d'auto-évaluation, nous pouvons envisager utiliser les [Flashcards](https://h5p.org/flashcards), surtout pour les graphiques.

### "Take home message"

Dans une capsule d'apprentissage certains éléments sont cruciaux. Bien définir les objectifs et les prérequis au début de la capsule sont vitaux. En fin de capsule, un résumé des points importants à retenir, le fameux "take home message" est ultra-important également... encore faut-il que l'étudiant assimile et mémorise ce/ces message(s). H5P propose du contenu qui permet d'appréhender ce résumé de manière plus active et ludique.

- [Summary](https://h5p.org/summary) se *doit* pratiquement d'être utilisé systématiquement en fin de chaque capsule d'apprentissage pour résumer les points importants. Avec ce contenu H5P, c'est l'étudiant qui établi sa liste de messages importants de manière **active**.