Session-Angebot: Moodle erweitern mit JavaScript/jQuery

Session-Angebot: Moodle erweitern mit JavaScript/jQuery

von Joachim Jakob -
Anzahl Antworten: 3

Für fortgeschrittene Moodle-Admins oder Trainer mit JavaScript/jQuery/CSS Kenntnissen könnte ich einen Weg vorstellen, wie man durch Einbettung von etwas JavaScript in ein Textfeld im Kurs z.B. eine Druckansicht der Namen der Teilnehmer mit den E-Mailadressen erhält oder auch eine Drucker freundlich formatierte Auswertung von Testergebnissen uvm. mittels einer Kombination verschiedener Techniken:

Über z.B. ausgehende Links oder nach der fest relativ zur Kurshauptseite definierten Linkstruktur von Unterseiten (z.B. alle ausgehenden Textseiten oder die Seite mit der Liste der Benutzer oder die Bewertungsseite mit den Testergebnissen etc) kann der dortige Seiteninhalt nach Anklicken eines Buttons von der Kurshauptseite aus unsichtbar geholt und je nach Verwendungszweck in eine jQuery-Variable bzw. als HTML-Inhalt geschrieben werden. Dieser kann zwischendurch auch ggf. noch gefiltert und ggf. neu organisiert werden (z.B. als neue HTML-Datei mit eigenem CSS oder auch als CSV uvm.). Diese Ausgabe kann dann z.B. als DataURL in einen neuen Browsertab geladen werden.

Für einen Anwendungsfall ist hier als Anlage ein Beispiel eingefügt, mit dem der Kursleiter/Trainer/Lehrer auf einen Klick eine CSV-Liste aller Schüler erhält, bei denen noch keine E-Mail Adresse angegeben wurde. (Dies kann z.B. sinnvoll sein, falls die Benutzerverwaltung von der Lernplattform getrennt über LDAP o.ä. erfolgt und eben nicht über die E-Mail Adresse als primärem, bei der Registrierung erforderlichem Identifikationsmerkmal).

Zum Ausprobieren Entpacken, mit einem UTF-8/Newline fähigen Texteditor (Geany/Notepad++) öffnen, dann im Testkurs ein neues Textfeld anlegen (egal ob im Atto oder im TinyMCE) und im HTML-Bearbeitungsmodus (vgl. Spitze Klammern Button im Editor <>) den kompletten Textinhalt hineinkopieren.

Falls die Ausgabe fehlerhaft ist (gerade mit einer blanko Moodle 3-Instanz erzeugt), müssen noch die basisurl (Zeile 13) und z.B. die CSS-Selektoren (evlt. andere Klassennamen des Zielfelds) angepasst werden.

Falls sich fortgeschrittene Anwender mit Programmiererfahrung für eigene Erweiterungen nach diesem Muster interessieren, könnte ich gerne in einem entsprechenden Workshop Hilfestellungen beim Experiementieren geben.

 

Re: Session-Angebot: Moodle erweitern mit JavaScript/jQuery

von gelöscht -
Hallo Joachim, das hört sich sehr gut an! Könntest Du auch zeigen, wie man MathJax und jQuery zur schülergerechten Formeleingabe bei mathematischen Formeln in Moodle integrieren kann (inkl. Auswerung der Ergebnisse)? Beispiel (ohne Moodle): http://jsbin.com/hujewa/edit?html,output Viele Grüße Heiko

Re: Session-Angebot: Moodle erweitern mit JavaScript/jQuery

von Joachim Jakob -

Für die reine Erstellung von Formeln (z.B. für Textfelder im Kurs oder auch in der Fragestellung von Aufgaben) mit TeX sind als Alternativen möglich: (1) eingebauter Formeleditor im Atto (der Java basierte DragMath im TinyMCE dürfte mangels Java-Browserplugin nicht mehr verwendbar sein) oder (2) <quizdidaktik.de/formeleditor>  (Nachteil: ein zusätzlicher Copy&Paste-Schritt nötig, Vorteil: ODF-Export für Weiterverwendung mit LibreOffice und MathML-Export für Weiterverwendung z.B. in EPUB3 möglich)

 

Soll das Ergebnis rein Client seitig (also ohne zentrale Auswertung) dem Schüler beim Überprüfen sichtbar gemacht werden, kann dies sehr einfach mit dem Lückentext-Werkzeug <quizdidaktik.de/lueckentext> umgesetzt werden, indem die Formel mit TeX gesetzt wird und das - außerhalb der Formel liegende! - Ergebnis als Lücke (hier allerdings als Zeichenkettenvergleich) umgesetzt wird. Die HTML-Datei kann dann entweder direkt in Moodle hochgeladen werden oder mit <quizdidaktik.de/html2mebisiframe> in einen Iframe eingefügt für eine Darstellung direkt auf der Hauptseite. Über den GIFT-Export kann diese Version auch als Lückentextfrage vom Typ Shortanswer in Moodle importiert werden.

Will man in Moodle eine serverseitige Auswertung der Schülerantwort, so wäre dies über Lückentextfragen vom Typ numerisch möglich (die dann in eine im Kurs erstellte Aktivität vom Typ Test zugeordnet werden).
Für die vereinfachte Erstellung einer einzelnen solchen Kurzantwort-Frage ist <quizdidaktik.de/mebis-zahleneingabefrage> geeignet, will man in einem Rutsch gleich einen numerischen Lückentext erzeugen, nimmt man <quizdidaktik.de/mebis-lueckentext-numerisch>

TeX-Formeln und Eingabefelder lassen sich unabhängig davon auch in GeoGebra realisieren. Will man ein GeoGebra-Applet mit außerhalb davon liegenden TeX-Formeln direkt auf der Kurshauptseite (aber ohne zentrale Auswertung) einbinden, kann man mit GeoGebra2HTML <quizdidaktik.de/ggb2html> zuerst eine HTML-Datei erzeugen und diese dann mit <quizdidaktik.de/html2mebisiframe> verpacken.
Sollen mehrere GeoGebra-Applets einzeln auswählbar (schnellere Ladezeiten) angezeigt werden, so kann man deren GeoGebraTube-Embedding-Codes mit <quizdidaktik.de/geogebrasammlungsersteller> verpacken.

Eine Möglichkeit mit zentraler Auswertung von Schülerantworten besteht auch innerhalb von GeoGebra-Applets, welche dann das Ergebnis "nach draußen liefern" - dies ist aber weitaus komplexer. Ein Einführungstutorial dazu ist zu finden auf <www.mebis.bayern.de/infoportal/fortbildung/tutorials/lernplattform-f-l/geogebra/geogebra-applet-test>

Falls in der eigenen Moodle-Instanz MathJaX nicht, oder nicht vollständig, oder mit einer anderen als der gewünschten Konfiguration verfügbar ist, kann man dies auch wie folgt nachträglich nachladen bzw. abändern. (⚠ Dabei kann es aber zu Nebenwirkungen beim Laden der Kursseite kommen!)

Beispiel 1: MHCHEM nachladen

MathJaX-mhchem-Nachladeblock
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/x-mathjax-config">// <![CDATA[
MathJax.Hub.Config({TeX: {extensions:["mhchem.js"]}});
// ]]></script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){MathJax.Hub.Typeset()});
// ]]></script>


Beispiel 2: alte $$ als (eigentlich fehlerhafte) inline-Darstellung erzwingen (z.B. falls man noch eine alte, fehlerhafte Fragensammlung im Kurs benutzt, diesen Ausschnitt in einen im ganzen Kurs - also auch während der Testdurchführung - angezeigten Textblock einfügen)

MathJaX-$$-inline-Darstellungs-Reparaturtextblock
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
          extensions: ["tex2jax.js"],
          jax: ["input/TeX", "output/HTML-CSS"],
          tex2jax: {
            inlineMath: [ ['$$','$$'], ["\\(","\\)"] ],
            displayMath: [ ["\\[","\\]"] ],
            processEscapes: true
          }
    });
</script>        
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript">
    $(document).ready(function(){
          MathJax.Hub.Typeset();
    });
</script>

Eine gute Möglichkeit zur handschriftlichen Formeleingabe habe ich leider noch nicht gefunden, für Windows-Benutzer könnte hier der Mathematik-Eingabebereich nützlich sein <windows.microsoft.com/de-de/windows7/use-math-input-panel-to-write-and-correct-math-equations>. Falls man aber gar kein TeX vom Schüler erhalten will, kann dieser auch einfach mit z.B. <quizdidaktik.de/whiteboard> ein SVG speichern.