11.4 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. H5P est compatible avec Moodle (il peut être installé comme plugin). Ce serait donc parfaitement logique de l’utiliser de cette manière si Moodle est déjà employé. Malheuresuement, le contenu H5P n’est pas utilisable ailleurs que dans Moodle lui-même. Or, notre souhait est d’intégrer le contenu H5P dans un bookdown qui ne peut être hébergé sur Moodle5. Une autre option consiste à utiliser soit Wordpress, soit Drupal 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. xAPI est un standard développé pour permettre l’interaction entre un LMS comme Moodle et un LRS (Learning Record Store) une base de données chargée d’enregistrer les traces de l’apprentissage 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 par GitHub parce que les é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.
11.4.1 Installation du plugin H5P
Une fois le serveur Wordpress opérationnel, l’installation de H5P lui-même est très simple :
Se connecter au serveur Wordpress comme 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. À 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.
11.4.2 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.
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. Il est 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”).
11.4.3 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 utiliserons le plugin H5PxAPIkatchu pour faire la liaison avec notre base de données MongoDB.
11.4.3.1 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 maintenu6.
La configuration est également extrêmement simple.
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).
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 !
Avec cette configuration, l’enregistrement de l’activité se fait uniquement lorsque le contenu H5P est utilisé directement dans Wordpress (à partir d’une page Wordpress ou du tableau de bord). Mais cela ne fonctionne pas encore dans le bookdown ! En effet, notre 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 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 placé dans le fichier header.html qui est inclus dans le bookdown grâce à ceci dans index.Rmd :
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 de cette manière. Voici ce que cela donne dans notre site exemple :
<!-- 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 ce n’est pas tout ! Il nous faut encore le code Javascript H5P et H5PxAPIkatchu :
<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 une fois cela réalisé, nous pouvons aussi enregistrer l’activité des H5P inclus dans les pages bookdown de notre site.
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 (ce code est placé dans la zone dédie du plugin My custom functions après avoir remplacé <USER>, <PASSWORD>, <SERVER|2|3> et <SHARD> par les valeurs correspondantes au compte configuré pour accéder à votre base de données MongoDB sur Atlas ou autre) :
// 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://<USER>:<PASSWORD>@<SERVER>.mongodb.net:27017,<SERVER2>.mongodb.net:27017,<SERVER3>.mongodb.net:27017/test?ssl=true&replicaSet=<SHARD>&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}. TODO: remanier ceci avec une procédure simplifiée en utilisant {learnitdown}.
11.4.3.2 Autres plugins H5P
- Le même auteur de H5PxAPIkatchu propose aussi 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 pour obtenir aisément le code
<iframe>...</iframe>d’un contenu H5P. Nous n’en avons pas besoin car la fonctionlearnitdown::h5p()remplit la même fonction dans R.
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.↩︎
Nous avons fait une proposition de pull request à l’auteur qui a répondu immédiatement.↩︎