Assistance technique

Bonjour à toutes et à tous,

L'astuce du jour vous propose de diffuser à vos usagers une information sous la forme d'une pseudo fenêtre dont le contenu sera codée en HTML (incluant donc tout type de média hébergé publiquement), comme l'annonce d'une opération de maintenance, d'une modification majeure..., depuis n'importe quelle page de votre plateforme Moodle, a priori quelque soit le thème graphique employé et depuis la version 2.X de Moodle et supérieure, sans modification du code PHP.

Pourquoi faire ?

Ne vous est-il pas déjà arrivé de vouloir informer l'ensemble des usagers de vos plateformes d'un message capital ? Problème : tous ne passent pas forcément par la page d'accueil (pas obligatoirement activée d'ailleurs), ou encore votre thème préféré n'inclut pas de zone suffisamment "incontournable" pour abriter ce genre de message, personne ne prend plus connaissance des alertes du tableau de bord,... Et oui ! Rappelez-vous la fois où, suite à une opération de maintenance, dont l'information avait pourtant été diffusée à grands cris, un examen avait été violemment crashé en plein vol après l'arrêt programmé du serveur... L'écho des plaintes résonnent encore parfois dans vos oreilles par les nuits de pleine lune ! Bref !

La solution que je vous propose ici recourt aux contenus "HTML additionnel", disponibles, sauf erreur, depuis la version 2.0 de Moodle dans "Administration du site > Présentation > HTML additionnel". A l'origine, ces paramètres avaient été prévus pour accueillir les codes Analytics (cf MDL-25597) mais ils peuvent faire bien plus que cela. La stratégie est de placer du code javascript dans l'entête, puis de positionner le message d'information à l'aide de codes HTML dans le corps de la page et de déclencher automatiquement le "surgissement" de ce message à l'ouverture de la page. Comme on est élégant, et qu'on ne veut surtout pas que ce message revienne à chaque fois qu'on sollicite une page, il est prévu 2 mécanismes :

• le premier fait que si on recharge cette page, le message disparait pour 24h...
• le second fait que si on coche une case spécifique au bas de la fenêtre d'annonce, on choisit volontairement de ne plus voir se message.

Comment fait-on ?

Dans HEAD (additionalhtmlhead), on insère le code suivant :

<SCRIPT LANGUAGE="JavaScript">

// Nombre de jours pendant lesquels le message ne doit plus s'afficher
// si on coche la case
// (0 indiquera un durée infinie)
var expDays = 10; 

function GetCookie (name) { 
   var nameEQ = name + "=";
   var ca = document.cookie.split(';');
   for(var i=0;i < ca.length;i++) {
       var c = ca[i];
       while (c.charAt(0)==' ') c = c.substring(1,c.length);
       if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
   }
   return null;
 }

function SetCookie (name, value, days) { 
   if (days) {
       var date = new Date();
       date.setTime(date.getTime()+(days*24*60*60*1000));
       var expires = "; expires="+date.toGMTString();
   }
   else var expires = "";
   document.cookie = name+"="+value+expires+"; path=/";
}

function DeleteCookie (name) { 
   SetCookie(name,"",-1);
}

function checkCount() {
   var count = GetCookie('nbInfoAff');
   var infoChecked = GetCookie('infoChecked');
   if (count == null) {
      count=1;
      SetCookie('nbInfoAff', count, 1);
      if (infoChecked!='OK') {
         document.getElementById('message').style.display = 'block';
      }
   }
}

function checkCGV() {
   document.getElementById('message').style.display = 'none';
   SetCookie('infoChecked', 'OK', expDays);
   }

window.onload=checkCount
</script>

On peut ajouter, toujours dans HEAD, un peu de styles CSS pour faire plus beau (à adapter selon vos goûts) mais surtout pour imposer le placement de la pseudo-fenêtre en plein au milieu de l'écran :

<style type="text/css">
 #message {
    color:#09c; 
    background:rgba(0,0,0,.9); 
    padding:15px;  
    border-radius:5px; 
    box-shadow: 5px 5px 12px #555; 
    opacity:0.9;
    margin-top: -300px;
    margin-left: -300px; 
    width: 600px;
    top: 50%;
    left: 50%;
    position: fixed;
    display:none;
    z-index: 100;
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
 }
</style>

Puis dans la partie "Lorsque BODY est ouvert ( additionalhtmltopofbody)" :

<div id="message">
  Mon message hyper-important !!! Tu pourras pas dire qu'on ne t'avait pas prévenu !
  <br />
  <input type="checkbox" id="cgv" name="cgv" onclick="checkCGV();"/>J'ai pris connaissance de ce message. Je ne souhaite plus son affichage.
</div> 

Plusieurs remarques :

• Ce bricolage s'appuie sur un cookie stocké localement ! Il est donc propre à un navigateur et non au profil de l'usager. Si celui-ci coche la fameuse case, au boulot par exemple, mais utilise ensuite un autre navigateur, chez lui, le message revient.
• Il est fortement conseillé d'indiquer une durée dans expDays. En effet, cette variable permet au navigateur de détruire la valeur qui mémorise la "case cochée" stockée dans le cookie. Si cette variable n'est jamais supprimée, alors, si on veut plus tard ré-utiliser ce mécanisme, le message n'apparait plus.
• Le code HTML du message supporte tous les médias (images, vidéos,...) possibles et imaginables, à condition d'être accessibles à un usager sans authentification. Il est donc possible d'enrichir vos messages avec de jolis effets.
  

Cette astuce est partagée sans garantie, à vos risques et périls ! Je vous recommande vivement de vous faire la main sur une machine de test. Si vous avez des suggestions d'amélioration, partagez-les !


A bientôt,
Patrick