Joseph Rézeau

Et voici les copies d'écran

Le bouton Vérifier est bien sur fond vert au lieu du bleu par défaut de Moodle

Le bouton Afficher la réponse est bien sur fond violet au lieu du bleu par défaut

Le bouton de confirmation Terminer est bien sur fond orange au lieu du bleu par défaut.

Comment modifier/surcharger les styles des activités H5P dans Moodle

Il y a 2 façons de modifier/surcharger un thème Moodle avec des styles pour les activités H5P. La solution suivante, que j'ai testée et qui fonctionne, permet de ne pas toucher du tout au code du thème Moodle que l'on souhaite surcharger, ce qui permet d'éviter les problèmes de mise à jour du thème.

Les explications sont données pour un site moodle installé en local sur un ordinateur avec un serveur Apache installé (XAMPP ou autre). Il faudra transposer pour un site en ligne.

Pour notre démo, on fera les opérations suivantes :

• modification/surcharge du thème par défaut de Moodle, Boost.
• on aura au préalable installé sur le site Moodle ces activités H5P : Dictation, Multichoice et Drag & Drop ET on aura créé dans un cours de test avec quelques contenus avec ces 3 activités.
• on voudra modifier le style des Boutons (Check/Vérifier, etc.) de ces 3 activités Moodle:
  •  on mettra leur background en vert et la validation en rouge pour les activités H5P.Dictation et H5P.DragQuestion
  • et on mettre leur background en violet et la validation en orange pour l'activité H5P.MultiChoice
• Note.- Pour avoir des surcharges de styles différentes pour les mêmes éléments pour des activités H5P différentes, il faudra créer des feuilles de style différentes. Ceci n'est pas nécessaire si on souhaite modifier le style d'éléments communs à toutes les librairies de H5P présentes sur le site Moodle. Notre démo montre comment utiliser plusieurs feuilles de styles.

1. Aller sur le github de Moodle ici : https://github.com/h5p/h5pmods-moodle-plugin
2. Télécharger le fichier h5pmods-moodle-plugin-master.zip (Clone or download ->Download ZIP) sur votre ordinateur
3. Extraire le répertoire h5pmods-moodle-plugin-master de ce fichier ZIP et le copier dans le répertoire monsitemoodle/theme. ATTENTION ! Avant d'installer ce thème (en allant dans Administration) il y a plusieurs modifs à effectuer sur les fichiers inclus.
4. Renommer le répertoire monmoodle/theme/h5pmods-moodle-plugin-master -> monmoodle/theme/h5pmod
5. Dans le fichier monmoodle/theme/h5pmod/version.php remplacer :
   $plugin->dependencies = array(    'theme_bootstrapbase'  => 2016051900,);
   par :
   $plugin->dependencies = array(    'theme_boost'  => 2016051900,);
6. Dans le fichier monmoodle/theme/h5pmod/config.php remplacer :
   $THEME->parents = array('bootstrapbase');
   par :
   $THEME->parents = array('boost');
7. Dans le fichier monmoodle/theme/h5pmod/renderers.php
   1. Dans la déclaration de classe :
      class theme_h5pmod_mod_hvp_renderer extends mod_hvp_renderer {
      supprimer (ou commenter /*...*/) TOUTES LES FONCTIONS sauf la première : public function hvp_alter_styles
      En effet, ces autres fonctions ne nous intéressent pas ici, et elles peuvent même provoquer des bugs.
   2. Pour la démo, on ré-écrira la fonction public function hvp_alter_styles comme ceci :
      public function hvp_alter_styles(&$styles, $libraries, $embedType) {
              global $CFG;
              if (
                  isset($libraries['H5P.Dictation'])
                    ||
                  isset($libraries['H5P.DragQuestion'])
                  )
                {
                  $styles[] = (object) array(
                      'path'    => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css',
                      'version' => '?ver=0.0.1',
                  );
                }       
      if (isset($libraries['H5P.MultiChoice']) )
                {
                  $styles[] = (object) array(
                      'path'    => $CFG->httpswwwroot . '/theme/h5pmod/style/custom-MultiChoice.css',
                      'version' => '?ver=0.0.1',
                  );
                }
          }
8. Dans cet exemple, la feuille de style custom.css s'appliquera uniquement aux librairies H5P.Dictation et H5P.DragQuestion. La feuille de style que nous avons nommée custom-MultiChoice.css s'appliquera uniquement à la librairie H5P.MultiChoice.
9. Pour fignoler, mais pas indispensable, dans le fichier theme\h5pmod\lang\en\theme_h5pmod.php rajouter la chaîne manquante:
   $string['choosereadme'] = 'H5PMod is installed';
   ou tout autre message de votre choix. IL n'y a pas de fichier de langue FR (pas indispensable)
10. Maintenant il faut customiser nos styles. Voici des exemples...
11. Modifier le fichier monmoodle/theme\h5pmod\style\custom.css par exemple
    .h5p-joubelui-button {
        background: green!important;
    }
    Il est indispensable de rajouter la propriété !important à chaque règle CSS, sinon la surcharge ne sera pas prise en compte !
12. Créer le fichier monmoodle/theme\h5pmod\style\custom-MultiChoice.css avec, par exemple ces règles CSS :
    .h5p-joubelui-button {
        background: purple!important;
    }
    .h5p-core-button.h5p-confirmation-dialog-confirm-button {
        background: orange!important;
    }

OK, maintenant sur votre site Moodle, aller à Administration... et installer le nouveau thème

Si tout va bien, Tableau de bord Administration du site Présentation Thèmes Sélecteur de thème

Boost -> Changer de thème -> H5PMod -> Utiliser le thème

Aller dans votre cours de Test sur votre site Moodle et vérifier le résultat sur les activités H5P de types indiqués ci-dessus.
Ne pas oublier de vider vos caches et tout rafraîchir pour que les changements dans les CSS soient actualisés.

Quoi faire ensuite. Si vous avez bien compris la démo, pour activer vos propres modifications/surcharges dans les activités H5P de votre site, vous pourrez modifier les fichiers :
monmoodle/theme\h5pmod\renderers.php
monmoodle/theme\h5pmod\style\custom.css
+ éventuellement ajouter d'autres fichiers CSS correspondant à certaines activités H5P uniquement

A suivre... quelques captures d'écran montrant le résultat de ces modifs de CSS...

Well, you could read the documentation at https://docs.moodle.org/38/en/Embedded_Answers_(Cloze)_question_type#Format