Aujourd'hui je vais vous montrer comment ajouter des barres de progression à votre page d'accueil Moodle.
Si vous êtes en train d'utiliser votre propre thème ou un thème enfant, il faudra modifier le ficher renderer.php à la racine du dossier de votre thème.
Avant de commencer à coder, installez les plugins de type block myoverview et progress bar.
Aller dans la fonction coursecat_coursebox_content() et insérez ces lignes :
// PERCENT
global $USER;
$percentage = \core_completion\progress::get_course_progress_percentage($course);
if(floor($percentage) == 0) {
$emper = '3em';
$class = 'zeropercent';
} else {
$class = 'superpercent';
$emper = '2em';
}
if (!is_null($percentage)) {
$percentage = '<div class="progress"><div class="progress-bar '. $class .'" role="progressbar" aria-valuenow="' . floor($percentage) . '" aria-valuemin="0" aria-valuemax="100" style="min-width: '. $emper .'; width: ' . floor($percentage) . '%;">' . floor($percentage) . '%' . '</div></div>';
}
$coursecontext = context_course::instance($course->id);
if (isloggedin() && is_enrolled($coursecontext)) {
$content .= html_writer::tag('div', $percentage, array('class' => 'progress-chart-container-anto'));
}
// END PERCENT
On commence à créer la progression de chaque cours dans la variable $percentage. Si vous êtes à l'aise avec le PHP vous pouvez très bien utiliser le namespace (use core_completion\progress;).
Avec la fonction floor on arrondit le pourcentage et on se prépare à ajouter des classes à notre barre de progression.
Si c'est 0% on utilisera une classe avec un background-color transparent, sinon on ajoute une autre classe avec une couleur différente.
Si le cours permet d'avoir un pourcentage alors on ajoute du html à la progress bar (j'utilise Bootstrap).
Avec is_enrolled on récupère les cours auxquels l'étudiant est inscrit. Vous imaginez bien que si l'utilisateur n'est pas inscrit dans un cours la progression restera toujours à 0% et cela ne nous servira pas à grand chose.
Donc on vérifie si l'utilisateur est connecté et s'il est inscrit au cours pour ajouter la progress bar au contenu de l'affichage ($content).
Mon choix est de l'insérer après le titre du cours.
Après vous modifiez le css à votre guise. Moi j'ai choisi de faire de cette façon :
.progress-chart-container-anto {
display: block;
margin-left: 16%;
margin-top: -11%;
position: absolute;
width: 70%;
z-index: 2147483647;
}
.progress-chart-container-anto .progress {
border-radius: 0;
}
.progress-chart-container-anto .progress-bar {
background-color: #FB800A;
}
.progress-bar.zeropercent {
background-color: transparent;
border: medium none;
box-shadow: none;
color: #00567c;
}
N'oubliez pas de vider le cache.
Et voilà le résultat :
0 commentaire