Indi-Learning 2021 - Moodle-Hacks

Grundlagen

Ziel

Client seitig - auch ohne Administratorenrechte - die Darstellung im Kurs verändern oder neue Funktionen hinzufügen

Voraussetzungen und Fallstricke

In einem eigenen Moodle weichen u.a. aufgrund ggfs. einer anderen Version oder eines anderen Themes oder eines anderen Kursformats die Pfade und die CSS-Klassen der verschiedenen DOM-Elemente ab, ebenso die Basis-Domaine der jeweilige Moodle-Instanz. Die Beispiele müssen daher angepasst werden!

In der kommenden 4er Moodle Version könnte es sein, dass ohne Bootstrap evtl. kein System eigenes jQuery mehr enthalten ist.

Trainer- bzw. Lehrerrechte in einem eigenen, während der Entwicklung nicht produktiv genutzten Kurs
zumindest während der Bearbeitung deaktivierter Script-Protection Filter
Lokaler Texteditor mit Syntax-Highlighting. Ein im gleichen Browser wie der Testkurs genutzter online-Texteditor ist ungeeignet, falls durch einen Fehler im Skript der Browser einfrieren oder abstürzen sollte.
Falls im Skript-Bereich URLs mit https:// vorkommen, kann es sein, dass der URL als Link oder Bild anzeigen Filter diese mit umwandelt und dadurch das Skript zerschießt.

Vorgehen und Workflow

Das gewünschte Ziel-Element wird in den Entwickler-Werkzeugen im Inspektor angesteuert und der CSS-Pfad wird erstmal auf Vorrat in eine lokale Textdatei kopiert. Dieser wird anschließend auf die notwendigen Elemente gekürzt.
In der Konsole im Browser wird testweise der eigentliche "Netto"-Befehl ausprobiert. Hier bietet sich eine Kombination aus jQuery mit dem gefundenen CSS-Selektor an.
Wenn alles funktioniert, wird eine lokale Skript-Datei bzw. eine lokale HTML-Datei angelegt, in welcher die Funktionen zum Nachladen und ggfs. auch Schaltflächen eingetragen werden.
Je nach gewünschter Platzierung nur auf einer Kursseite oder auf allen Kursunterseiten oder auch den Unterseiten der Aktivitäten wird der vorbereitete Quelltextschnipsel im HTML-Bearbeitungsmodus in ein Textfeld oder in einen Textblock mit den entsprechenden Sichtbarkeitseinstellungen hineinkopiert.
Wenn nach dem Abspeichern alles funktioniert - prima!
Falls noch Fehler auftreten, diese testweise schrittweise ausprobieren und alle Änderungen immer auch in die lokale Sicherungsdatei es HTML-Quelltextschnipsels mit übernehmen.
Vor der Nutzung in einem produktiv genutzten Kurs immer auch in verschiedenen Benutzerrollen und Kursformaten ausprobieren, damit man sich nicht "aussperrt".

Informationen über den aktuellen Nutzer oder die aktuelle Kursumgebung auslesen

Falls bei der Konstruktion eines auszuführenden Links Informationen über den aktuellen Benutzer bzw. die aktuelle Kursumgebung erforderlich sind, so finden sich diese in der Variablen M

M.cfg.wwwroot ⇒ die Skripte auf andere Moodle-Instanzen übertragbar machen
M.cfg.contextid
M.cfg.sesskey ⇒ häufig für übergebene Formulareingaben erforderlich
M.cfg.theme ⇒ evtl. für eine Weiche bei unterschiedlicher Adressierung von Elementen bei verschiedenen Themes
$('input[type=hidden][name=edit]').length == 1 ⇒ Trainer oder Lehrerrolle (der Bearbeiten Button ist dann im Kurs verfügbar, wenn nicht, wird 0 zurückgegeben)

Inhalte oder Skripte verzögert nachladen

Probleme bzw. Schwierigkeiten:

Wenn eine Funktion bereits beim Laden einer Kursseite ausgeführt werden soll und wenn diese jQuery benötigt, kann es zu Konflikten führen, wenn dieses noch nicht zur Verfügung steht
Wenn eine feste jQuery Version von einem externen CDN nachgeladen wird, ist das einerseits schon wegen der Übertragung der IP-Adresse ein Datenschutzproblem als auch aus Sicherheitsaspekten problematisch, wenn diese Version zukünftig veraltet und Sicherheitslücken aufweist. Eine manuelle Nachpflege ist zu aufwändig.

Lösungsansatz:

Es wird das Moodle eigene jQuery mit require nachgeladen.

Quelltextschnipsel:

Ein bestimmtes Element auf der Seite adressieren

Beispiele

Eine andere Schaltfläche soll ausgelöst werden, ohne diese direkt anzuklicken, z.B. Tabs in einem Kurs im Ein-Themen-Format aus einem Inhaltsverzeichnis im ersten Abschnitt heraus
Eine Schaltfläche soll ausgeblendet werden, z.B. in einem Kurs die Mitteilungen während eines Tests

Inhaltsverzeichnis im Ein-Themen-Format

<script>
  function gehe_zum_abschnitt(wer) {
    console.log(wer);
    var alte_url = String(location.href).replace(/\&/g, '&');
    var nr = wer.split('_')[1];
    /* wenn bereits weitere Parameter neben der id in der URL enthalten sind, diese entfernen */
    if (alte_url.match('&')) {
      alte_url = alte_url.split('&')[0]
    };
    var neue_url = alte_url + '§ion=' + String(nr);
    console.log(neue_url);
    //$('#hiddenlink_'+nr).attr('href', neue_url);
    //$('#hiddenlink_'+nr).trigger('click');
    window.location.href = neue_url;
  }
</script>
<div role="nav">
  <button id="meinindex_1" class="btn btn-primary" onclick="gehe_zum_abschnitt($(this).attr('id'))">Abschnitt 1</button>
  <a id="hiddenlink_1"></a>
  <button id="meinindex_2" class="btn btn-primary" onclick="gehe_zum_abschnitt($(this).attr('id'))">Abschnitt 2</button>
  <a id="hiddenlink_2"></a>
  <button id="meinindex_3" class="btn btn-primary" onclick="gehe_zum_abschnitt($(this).attr('id'))">Abschnitt 3</button>
  <a id="hiddenlink_3"></a>
</div>

Inhaltsverzeichnis im Themen-Format

Schaltfläche zum Einblenden der Mitteilungsleiste oben in der Navbar ausblenden

Alle Elemente eines bestimmten Typs ansprechen

Beispiele

Es sollen alle externen Links oder alle Aktivitäten eines bestimmten Typs auf einer Kursseite auf einmal in neuen Tabs geöffnet werden (Pop-Ups müssen ggfs. im Browser erlaubt werden)
Es soll eine Sammel-E-Mail an alle Kursteilnehmer mit hinterlegter E-Mailadresse über einen E-Mail-Client, nicht das Mitteilungssystem verfasst werden

E-Mailadressen als Text ausgeben

<!--

Wozu?
- Erzeugt eine Mail an alle Kursteilnehmer als BCC, die eine E-Mailadresse in ihrem Profil hinterlegt haben

Wie?
- Direkt auf der Kurshauptseite wird dieser komplette HTML-Quelltextschnipsel im HTML-Bearbeitungsmodus in ein Textfeld eingefügt

Wie nur für Lehrkräfte im Kurs verfügbar machen?
- Das Textfeld kann für SuS unter Voraussetzungen nicht verfügbar geschaltet werden

Beschränkungen?
Wenn die Teilnehmer in der Schülerrolle keinen Zugriff auf die Teilnehmerlisten-Seite im Kurs haben oder wenn gar keine E-Mailadressen von Nutzern hinterlegt sind, bricht das Skript ab. Fehler werden nicht abgefangen.

-->

<form class="form-inline">
  <button id="b_email_ausgeben" class="btn btn-primary">E-Mailadressen als Text ausgeben</button>
  <input type="form-control" id="i_ausgabe" style="display:none;" />
</form>

$('#b_email_ausgeben').click(function() {
          var aktuelle_urlparameter=window.location.search;
          //console.log(aktuelle_urlparameter);
          var aktuelle_kursid=String(aktuelle_urlparameter).split('id\=')[1];
          if (aktuelle_kursid.match(/\&/)) {
              aktuelle_kursid_netto=aktuelle_kursid.split('\&')[0];
          } else {
              aktuelle_kursid_netto=aktuelle_kursid
          }
          //console.log(aktuelle_kursid_netto);
          var protokoll = 'https';
          var protokolltrenner = '://';
          var basisurlteilnehmerliste = 'lernplattform.mebis.bayern.de/user/index.php?id=';
          var zusatzparameter='&perpage=5000';
          var link_zur_teilnehmerliste=protokoll+
                                       protokolltrenner+
                                       basisurlteilnehmerliste+
                                       aktuelle_kursid_netto+
                                       zusatzparameter;
          //console.log(link_zur_teilnehmerliste);
          var zielseiteninhalt_temp = $.ajax({
              url: link_zur_teilnehmerliste,
              cache: false,
              async: false,
              dataType: "html"
          }).responseText;
          //console.log(zielseiteninhalt_temp);
          var zielseite_tabellenobjekt = $(zielseiteninhalt_temp).find('table#participants').html();
          //console.log(zielseite_tabellenobjekt);
          alle_teilnehmeremails=[];
          $(zielseite_tabellenobjekt).find('td').each(function() {
              if ($(this).hasClass('c2')) {
                  var temp_text=$(this).text();
                  if (temp_text.length > 0) {
                      //console.log($(this));
                      alle_teilnehmeremails.push(temp_text);
                  }
              }
              
              
          });
          // sort unique
          var alle_teilnehmeremails_unique = [...new Set(alle_teilnehmeremails)].sort() 
          
          var textausgabe=alle_teilnehmeremails_unique.join(',');
          $('#i_ausgabe').val(textausgabe);
          $('#i_ausgabe').show();
          /*
          var seiteninhalt='data:text/plain;charset=utf-8;base64,'+window.btoa(unescape(encodeURIComponent(textausgabe)));
          console.log(seiteninhalt);
          window.open(seiteninhalt, '_blank');
          */
          
          return false
      });

}); // END require
  }, 500); // END Zeitverzögerung
  //]]>
</script>

E-Mails verfassen

<!--

Wozu?
- Erzeugt eine Mail an alle Kursteilnehmer als BCC, die eine E-Mailadresse in ihrem Profil hinterlegt haben

Wie?
- Direkt auf der Kurshauptseite wird dieser komplette HTML-Quelltextschnipsel im HTML-Bearbeitungsmodus in ein Textfeld eingefügt

Wie nur für Lehrkräfte im Kurs verfügbar machen?
- Das Textfeld kann für SuS unter Voraussetzungen nicht verfügbar geschaltet werden

-->

<form class="form-inline">
  <button id="b_email_verfassen" class="btn btn-primary">E-Mail verfassen</button>
  
  <a id="a_mailto_link" hidden href="#">E-Mail mit Blindkopie</a>
</form>

$('#b_email_verfassen').click(function() {
          var aktuelle_urlparameter=window.location.search;
          //console.log(aktuelle_urlparameter);
          var aktuelle_kursid=String(aktuelle_urlparameter).split('id\=')[1];
          if (aktuelle_kursid.match(/\&/)) {
              aktuelle_kursid_netto=aktuelle_kursid.split('\&')[0];
          } else {
              aktuelle_kursid_netto=aktuelle_kursid
          }
          //console.log(aktuelle_kursid_netto);
          var protokoll = 'https';
          var protokolltrenner = '://';
          var basisurlteilnehmerliste = 'lernplattform.mebis.bayern.de/user/index.php?id=';
          var zusatzparameter='&perpage=5000';
          var link_zur_teilnehmerliste=protokoll+
                                       protokolltrenner+
                                       basisurlteilnehmerliste+
                                       aktuelle_kursid_netto+
                                       zusatzparameter;
          //console.log(link_zur_teilnehmerliste);
          var zielseiteninhalt_temp = $.ajax({
              url: link_zur_teilnehmerliste,
              cache: false,
              async: false,
              dataType: "html"
          }).responseText;
          //console.log(zielseiteninhalt_temp);
          var zielseite_tabellenobjekt = $(zielseiteninhalt_temp).find('table#participants').html();
          //console.log(zielseite_tabellenobjekt);
          alle_teilnehmeremails=[];
          $(zielseite_tabellenobjekt).find('td').each(function() {
              if ($(this).hasClass('c2')) {
                  var temp_text=$(this).text();
                  if (temp_text.length > 0) {
                      //console.log($(this));
                      alle_teilnehmeremails.push(temp_text);
                  }
              }
              
              
          });
          // sort unique
          var alle_teilnehmeremails_unique = [...new Set(alle_teilnehmeremails)].sort() 
          //console.log(alle_teilnehmeremails_unique);
          
          var mailto_link='mailto:?bcc='+
                           alle_teilnehmeremails_unique.join(',')+
                           '&subject=Betreff'+
                           '&body=Textinhalt';
          $('#a_mailto_link').attr('href', mailto_link);
          /*
          $('#a_mailto_link').on('click', function() {
              window.open(mailto_link, '_blank');
              return false
          });
          */
          $('#a_mailto_link').get(0).click();
          
          return false
      });

}); // END require
  }, 500); // END Zeitverzögerung
  //]]>
</script>

Informationen von einer anderen Kursunterseite holen und neu zusammenführen

Beispiele

Testergebnisse sollen in einer ausdruckbaren Form erzeugt werden

<!-- 
Vorbereitung im Kurs:
1. Dieser Quelltextschnispel wird im HTML-Bearbeitungsmodus in ein Textfeld im Kurs kopiert.
2. Dieses Textfeld wird für Schüler nicht verfügbar gemacht.

Anwendung:
1. Die Lehrkraft kopiert aus der URL eines Tests nur die ID der Testaktiviät und fügt diese in dem Texteingabefeld ein.
2. Über die Schaltfläche "Testergebnisse ausdrucken" werden alle Detailauswertungs-Seiten automatisch geöffnet
3. Die Lehrkraft geht alle diese Tabs durch und triggert mit Strg+P das Ausdrucken in eine PDF-Datei hinein (ggf. muss der Dateiname jeweils geändert werden, damit nicht die vorherige überschrieben wird).
-->
<form class="form-inline">
  <input type="text" class="form-control" id="i_testid" value="10319095" placeholder="Füge hier die Test-ID ein">
  <button id="b_testergebnisse_ausdrucken" class="btn btn-primary">Testergebnisse ausdrucken</button>
  <a id="a_downloadlink_htmlexport" target="_blank" type="text/html">Nach dem Erzeugen im Firefox erst diesen Link anklicken und dann im neu geöffneten Tag nochmal die Adresszeile markieren und mit Enter den Tab neu laden ODER in Chrome mit Rechtsklick & Link in neuem Tab öffnen! Erst anschließend kann der Testbericht dort im neuen Tab mit Strg+P in eine PDF-Datei hinein ausgedruckt werden.</a>
</form>
<script>
  //<![CDATA[
  setTimeout(function() { // START Zeitverzögerung, damit onload sicher abgeschlossen ist
    require(['jquery'], function($) { // START Nachladen von jQuery mit require

// eigentlich wünschenswert: in Beschreibung eines Tests einfügen
      // Problem: Rolle Schüler oder Lehrer nicht per JavaScript zuverlässig unterscheidbar
      //          auch SuS würden die Schaltfläche angezeigt bekommen, daher Umweg über
      //          manuelle ID-Eingabe in für SuS nicht verfügbarem Textfeld im Kurs
      $('#b_testergebnisse_ausdrucken').click(function() {
        var protokoll = 'https';
        var protokolltrenner = '://';
        var basisurltest = 'lernplattform.mebis.bayern.de/mod/quiz/report.php?id=';
        var testid = $('#i_testid').val(); //'10319095'; // String(M.cfg.contextid)
        var parametertestbericht = '&mode=responses&onlygraded=true';
        // über den Zusatz &onlygraded=true wird automatisch der Haken auf der "unsichtbaren" Zielseite gesetzt bei [x] Max. einen fertigen Versuch pro Teilnehmer/in anzeigen (Bester Versuch) 
        var aufrufurl = protokoll +
          protokolltrenner +
          basisurltest +
          testid +
          parametertestbericht;
        console.log(aufrufurl);
        //window.open(aufrufurl);
        var zielseiteninhalt = $.ajax({
          url: aufrufurl,
          cache: false,
          async: false,
          dataType: "html"
        }).responseText;
        var zielseite_obj = $(zielseiteninhalt)
        //console.log(zielseite_obj);
        //nur diejenigen Links die enthalten: mod/quiz/review.php?attempt=ATTEMPTID
        var links_zur_einzelauswertung = [];
        zielseite_obj.find('a').each(function() {
          //console.log(this.href);
          if (String(this.href).match(/https\:\/\/lernplattform\.mebis\.bayern\.de\/mod\/quiz\/review.php\?attempt\=/)) {
            links_zur_einzelauswertung.push(String(this.href));
          }

});
        console.log(links_zur_einzelauswertung);

/*
        // Weg 1: alle Links zum jeweils besten Versuch öffnen, dort muss dann mit Strg+P das Ausdrucken erfolgen
        alert('Es werden alle besten Versuche in neuen Tabs geöffnet. Das Öffnen von Pop-Ups muss daher für die Lernplattform erlaubt werden. In jedem Tab muss mit Strg+P manuell das Ausdrucken in einen vorher im System voreinzustellenden PDF-Drucker angestoßen werden.')
        
        for (var i=0; i < links_zur_einzelauswertung.length; i++) {
            window.open(links_zur_einzelauswertung[i], '_blank');
            
        
        }
        */
        // Weg 2: wegen unterdrücktem Öffnen von HTML-DataURLs nicht mehr möglich

var alle_html_inhalte = [];

for (var i = 0; i < links_zur_einzelauswertung.length; i++) {
          var zielseiteninhalt_temp = $.ajax({
            url: links_zur_einzelauswertung[i],
            cache: false,
            async: false,
            dataType: "html"
          }).responseText;
          var zielseite_obj_temp = $(zielseiteninhalt_temp).find('div[role=main]').html();
          alle_html_inhalte.push(zielseite_obj_temp);
          zielseiteninhalt_temp = null;
          zielseite_obj_temp = null;

}
        //console.log(alle_html_inhalte);
        var bereichstrenner = '\n    </div>\n    <div class="eintrag_schueler">';

var alle_html_inhalte_string = alle_html_inhalte.join(bereichstrenner);

var neuer_html_quelltext_gesamt = '<!DOCTYPE html>\n' +
          '\n' +
          '  \n' +
          '    \n' +
          '    \n' +
          '  \n' +
          '  \n' +
          '    <div class="eintrag_schueler">\n' +
          '\n' +
          alle_html_inhalte_string +
          '    </div>\n'
        '  \n'
        '';
        //console.log(neuer_html_quelltext_gesamt);

var testinhalt = 'bla';
        var uriContent = 'data:text/html;charset=utf-8;base64,' + window.btoa(unescape(encodeURIComponent(neuer_html_quelltext_gesamt)));
        // 'data:text/plain;charset=utf-8,'+encodeURIComponent(neuer_html_quelltext_gesamt)
        //alert(uriContent);
        $('#a_downloadlink_htmlexport').attr('href', uriContent);
        $('#a_downloadlink_htmlexport').text('Erzeugten Bericht jetzt herunterladen');
        $('#a_downloadlink_htmlexport').show();
        //var a= window.open(uriContent, '_blank');
        //a.print();

return false;
      });

}); // END require
  }, 500); // END Zeitverzögerung
  //]]>
</script>