Gamification Moodle : dialogues façon SMS

J'ai inséré dans mon Moodle la possibilité d'afficher des dialogues façon SMS, joyeusement adapté de ce codepen.

Pour l'instant, je ne gère que dialogue gauche ou droite... J'envisage d'en créer plus en ajoutant des personnages (avatar + couleur) afin de créer des histoires plus élaborées.

Pour cela, j'ai ajouté des règles CSS à mon thème, en passant par : Administration > Présentation > Thèmes > More, puis dans le champ CSS personnalisée.

Règles CSS :

.sms {
  line-height: 1.7;
  max-width: 75%;
  margin-bottom: 1ex;
  display: inline-block;
  padding: 0.5ex 1em;
  border-radius: 1.5ex/1em;
  position: relative;
  box-shadow: 0 15px 1px -12px rgba(0,0,0,0.05);
}

.sms_left { 
  background-color: #ccc;
  color : black;
  clear:both;
  float:left;
  margin-left: 2ex;
 }

.sms_right { 
  background-color: #007AFF;
  background-image: linear-gradient(180deg,#007AFF,#1D62F0);
  color: white;
  clear: both;
  float:right;
  margin-right:2ex;
}

.sms_left:before {
  display:block;
  position: absolute;
  z-index: -999;
  border: 1ex solid transparent;
  bottom: 0;
  border-radius: 1em/1ex;  
  border-bottom-color: #ccc;
  border-right-color: #ccc;
  left: -0.8ex;
  content: "";
}

.sms_right:before {
  display:block;
  position: absolute;
  z-index: -999;
  border: 1ex solid transparent;
  bottom: 0;
  border-radius: 1em/1ex;  
  content: "";
  right: -0.8ex;
  border-bottom-color: #1D62F0;  
  border-left-color: #1D62F0;
}

Pour faciliter l'utilisation, j'ai opté pour le plugin Styles qui rajoute à l'éditeur atto un menu déroulant permettant d'utiliser des styles personnalisés (il faut prendre le temps d'activer ce plugin dans l'éditeur atto).

Voici les règles que j'ai utilisé pour ce plugin :

{
 "title": "SMS gauche",
 "type": "block",
 "classes": "sms sms_left"
},{
 "title": "SMS droite",
 "type": "block",
 "classes": "sms sms_right"
}

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *