13. Filter (Mehrsprachigkeit, Autoverlinkungen und mehr)
Abschnittsübersicht
-
In diesem Kurs geht es um die verschiedenen sog. "Filter", die in einem Moodle-Kurs aktiviert werden können. Viele davon sind standardmäßig aktiviert, manche müssen manuell aktiviert werden.
Filter dienen dazu, eingegebenen Text auf spezielle Eingaben oder Inhalte zu überprüfen, um dann eine besondere Darstellung zu generieren. So kann man Formeln, automatische Verlinkungen oder Hervorhebungen generieren.
Filter finden Sie - Bearbeitungsberechtigungen für den entspr. Kurs vorausgesetzt - an der Oberkante des Kurses in der sekundären Navigation unter "Mehr":

Im Folgenden gehe ich mehr oder weniger ausführlich auf die verschiedenen Filter ein:
-
Standareinstellung: Aktiviert
Der Filter Algebraische Notation ermöglicht eine einfache Eingabe mathematischer Formeln. Damit eine solche Eingabe als solche erkannt wird, muss sie in doppelte @-Zeichen notiert werden:
@@ [Formel] @@So führt z.B. die Eingabe von @@y=(x+2)^2/(3x)@@ zu
Der Filter erstellt aus der Eingabe eine große Grafik, die deutlich besser und einheitlicher aussieht als eine reine Texteingabe, z.B. √(x² + y³). Ein Vorteil besteht in der Editierbarkeit: Für Betrachter:innen wird zwar eine Grafik angezeigt, Menschen mit Bearbeitungsberechtigungen können aber die Inhate bearbeiten.
Die Möglichkeiten sind einigermaßen eingeschränkt, für komplexere mathematische Ausdrücke ist der Tex-Filter (s. unten) deutlich besser geeignet.-
Liste möglicher Notationen
-
-
Standardeinstellung: Aktiviert
Im Gegensatz zu der algebraischen Notation (s. oben) bietet der TeX-Filter deutlich mehr Möglichkeiten für mathematische Formeln. Hier werden die entsprechenden Eingaben nicht in doppelten @-Zeichen, sondern in doppelte $-Zeichen notiert:
Die Eingabe von $$y=\dfrac{(x+2)^2}{(3x)}$$ führt z.B. zu
Auch hier werden Grafiken gerendert, die Editierbarkeit bleibt aber erhalten. Die Syntax ist recht komplex, allerdings sind auch mehrzeilige Gleichungen, Matritzen und komplexe Ausdrücke möglich:
Die Beispiele machen die Komplexität deutlich, die Möglichkeiten sind aber dafür sehr umfassend. Für alle, die nicht fließend LaTeX oder TeX schreiben können, habe ich die allermeisten Möglichkeiten an anderer Stelle zusammengefasst.
Erläuterungen, Listen verschiedener Zeichen und Tipps & Tricks finden Sie in einem eigenen Kurs: https://moodle.thga.de/TeX -
Standardeinstellung: Aktiviert
Wenn ein Kurs ein Glossar enthält, können dessen Einträge in anderen Texten automatisch verlinkt werden. Das funktioniert natürlich nur mit Moodle-eigenen Texten, z.B. Abschnittsbeschreibungen, textfeldern, Textseiten, Büchern oder ähnlichen Inhalten. Nennungen von Glossarbegriffen in z.B. einem PDF-Dokument können nicht automatisch verlinkt werden.
Zu Testzwecken habe ich mal ein Glossar angelegt, in dem zwei Begriffe hinterlegt sind:
-
Standardeinstellung: Deaktiviert
Ähnlich wie der Glossar-Filter (s.o.) funktioniert die Auto-Verlinkung für Kursbestandteile. Auch hierfür habe ich einmal ein paar Beispielinhalte angelegt:
-
Standardeinstellung: Deaktiviert
Oft als "Spielerei" verunglimpft, haben Emoticons und Emojis innerhalb verschiedener Zielgruppen durchaus ihre Berechtigung.
Während Emoticons aus Textzeichen bestehen, also z.B. :-) oder 8-o oder ¯\_(ツ)_/¯ , sind Emojis Bilddateien, z.B. 🙄 oder 👋 oder 🤣.Der Filter "Emoticon als Bild anzeigen" ersetzt nun automatisch ausgewählte Textzeichen-Kombinationen durch Grafiken, sofern aktiviert.
Da Emojis bereits umfänglich vom Unicode-Konsortium (das sich die Standardisierung von Computer-Zeichensätzen zur Aufgabe gemacht hat) berücksichtigt wurden (vgl.: https://www.unicode.org/emoji/charts/full-emoji-list.html, Achtung: Lange Ladezeiten), ist der Filter evtl. überflüssig: Viele (Bildschirm-) Tastaturen haben eine eigene Emoji-Tastatur, und selbst auf Windows-Geräten kann man mit [Win] + [ . ] jederzeit auf entsprechende Unicode-Emojis zugreifen.Da in diesem Kurs der Filter aktiviert ist, hier einmal der Vergleich von Emoticons, Grafik-Ersetzungen durch den Moodle-Filter und den ungefähren Entsprechungen der Unicode-Zeichen (Grafiken zur Verdeutlichung etwas vergrößert):Text Moodle-
FilterZum Vergleich:
Unicode:-) 🙂 :) 🙂 :-D 😀 ;-) 😉 :-/ 😏 V-. 🤔 :-P 😛 :-p 😛 B-) 😎 ^-) 😏 8-) 😃 :o) 🤡 :-( 😞 :( 😞 8-. ☺️ :-I 🥵 :-X 😘 8-o 😮 P-| 🤕 8-[ 😡 (grr) 😡 xx-P 😵 |-. 😴 }-] 😈 (hrt) ❤️ (heart) ❤️ (yes) 👍 (no) 👎 ( ) 🥚 -
Standardeinstellung: Aktiviert
Wenn Sie eine Kurs in mehreren Sprachen anbieten möchten, steht der Multilang-Filter für mehrsprachigen Inhalt zur Verfügung. Das können Sie hier einmal testen:
Hallo!
Dieser Absatz ist momentan auf Deutsch geschrieben. Wenn Sie nun einmal die Sprache umschalten (wenn eingeloggt: > Benutzendenmenü > Sprache, wenn als Gast hier: oben rechts auf klicken), sollte dieser Abschnitt in der ausgewählten Sprache angezeigt werden. Zauberei!Momentan kann Moodle lediglich zwei Sprachen anzeigen, Deutsch und Englisch. Die installierten so genannten Sprachpakete beziehen sich vor allem auf die automatischen Texte, also Dinge wie "Startseite" ("Home"), "Meine Kurse" ("My courses"), "Einstellungen" ("Settings"), "Abschnitt" ("Topic"), usw.
Wenn auch die von Ihnen eingegebenen Kurstexte in mehreren Sprachen vorgehalten werden sollen, ist das zwar möglich, aber leider nicht übermäßig benutzendenfreundlich und ein bischen kompliziert. Denn dafür ist ein Eingriff in den Quelltext notwendig. Ein kurzer Exkurs:
-
HTML, WYSIWYG & Mehrsprachigkeit
HTML, ...Moodle ist am Ende des Tages auch nur eine Webseite, die in HTML (HyperText Markup Language, Info) notiert ist. Dabei handelt es sich um eine Auszeichnungssprache, also eine Art der Dokumentengestaltung, in der sowohl der eigentliche Inhalt als auch Eigenschaften, Relationen und Formate innerhalb des gleichen Dokumentes beschrieben werden.
Ein Beispiel:
<h3>Überschrift</h3>
<p>Dies ist der Text, mache Worte sind <string>speziell formatiert</strong>.In dem obigen HTML-Schnipsel wird ein Element der Art Headline mit Hierarchiestufe 3 (=h3) erzeugt, ihr Beginn wird mit einem öffnenden Tag (<h3>) gekennzeichnet und am Ende mit dem Pendant (</h3>) geschlossen. Der Elementinhalt ist "Überschrift", wobei dt. Umlaute - je nach Zeichencodierung des Dokuments - hier durch die (veraltete) Entity-Schreibweise ersetzt sind (Ü = Ü).
Danach folgt ein Paragraph (<p>...</p>), in dem noch einmal eine weitere Zeichenkette als Fettschrift (<strong>) formatiert ist.
Alle Webseiten, die Sie in Ihrem Browser sehen, funktionieren genau so, allerdings ist Ihr Browser so nett, den HTML-Code zu rendern, also eben nicht das reine HTML anzuzeigen, sondern die - in diesem Beispiel - Überschriften, die Absätze und die Fettschrift als eben solche darzustellen.
Vergleich des letzten Absatzes in gerendertem HTML (links) und Quelltext (rechts).
WYSIWYG ...Wenn Sie nun den Moodle-eigenen Editor nutzen, um einen Text zu schreiben, sehen Sie direkt das Endergebnis (What You See Is What You Get, Info), der Editor schreibt aber im Hintergrund Ihre Eingaben und Formatierungen in HTML um. Wenn Sie also auf den Button klicken, erzeugt der Editor von Ihnen unbemerkt die entsprechenden HTML-Elemente, hier eine unodered list (<ul>) mit ihren list items (<li>):
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li> <li>Listenpunkt 3</li>
</ul>
... und der Zusammenhang mit MehrsprachigkeitUm ein Textfeld mehrsprachig zu befüllen, müssen also nun zwei Varianten des HTML-Codes vorhanden sein, einmal die HTML-Elemente mit z.B. deutschsprachigem Inhalt und ein weiteres Mal ein zweiter Satz der Elemente mit englischsprachigem Inhalt. Da Moodle dafür (noch) keine komfortable Möglichkeit bietet, muss dafür der Quelltext angepasst werden 🙄.
Dafür stellen die Editoren eine Möglichkeit zur Verfügung, direkt Quelltext in Form des HTML-Codes zu editieren: Im Editor "Atto" gibt es in der unteren Editorzeile (erst aufklappen: ) den Button , im TinyMCE-Editor navigieren Sie über > Ansicht > Quellcode.
-
-
Standardeinstellung: Aktiviert
Dieser Filter ist dazu gedacht, H5P-Inhalte aus einer fremden Quelle einzubinden. Sie ist lediglich interessant für Personen, die Ihre H5P-Inhalte auf anderen Systemen (als diesem Moodle-System) oder lokal erstellt haben und diese an einem anderen Ort online abrufbar abgelegt haben.
Für alle anderen steht-
der H5P-Button
in den Texteditoren zur Verfügung - damit werden H5P-Inhalte "unscharf" als Medieninhalte eingebunden - und
- die Aktivität "H5P" zur Verfügung - damit können H5P-Lösungen auch "scharf" bewertet und in einer Kurs-Gesamtbewertung verrechnet werden.
Wenn Sie H5P-Inhalte aus einer Drittquelle über diesen Filter einbinden möchten, reicht es normalerweise, den Link in z.B. ein Textfeld einzutragen, der Filter ändert diesen Link automatisch in die sichtbare, interaktive Darstellung des H5P-Inhalts.
Manchmal scheitert die Einbindung an verschiedenen Sicherheitseinstellungen. Dann melden Sie sich bitte per Mail bei mir.
-
-
Standardeinstellung: Deaktiviert
Syntax meint hier vor allem (Programm-) Code. Zur Darstellung von verschiedenem Code gehört - neben u.a. Monospace-Schritfart und Einrückungen auch oft eine farbige Kennzeichnung (Highlighting) verschiedener Bestandteile des Codes. So werden z.B. Parameter, Werte, Variablen und Tags jew. mit anderer Schriftfarbe gekennzeichnet:
<h1>Headline</h1>
<p>Paraghraph with <a href="#linktarget" target="_blank">hyperlink</a>.</p>-
Weitere Beispiele
HTML:
<h1>heading</h1>
<p>paragraph</p>
<ul>
<li>list item</li>
<li>list item</li>
</ul>CSS:
#id-selector {
attribute:value;
}
.class-selector {
attributeA:valueA;
attributeB:valueB;
}JavaScript:
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
echo $txt;
echo "<br>";
echo $x;
echo "<br>";
echo $y;
?>jQuery:
$(document).ready(function() {
// comment
$('#button').click(function() {
$(this).toggleClass('active');
alert('button clicked!');
});
});C++:
#include <iostream>
using namespace std;
int main() {
int number;
cout << "Enter an integer: ";
cin >> number;
cout << "You entered " << number;
return 0;
} -
Vergleich verschiedener Code-Darstellungen:
Alle Arten von Code-Darstellung hier einmal im Vergleich:
Vorformatierter Text (<pre>)
Das hier ist ein <pre>-Element,
meint also einen - auch mehrzeiligen -
Code-Bereich ("Block"-Element).Für vorformatierten Text steht im Atto-Editor im Dropdown "Absatzformate" der Eintrag "Vorformatiert" zur Verfügung:

Inline-Code (<code>)Das hier ist ein Beispiel für ein
<code>-Element, es kann innerhalb einer Zeile funktionieren ("Inline"-Element).Mehrzeiliger Code ohne <pre>
sieht dagegen etwas schräg aus...Um einen Textteil als Code zu kennzeichnen, steht im Atto-Editor im Dropdown "Gestaltungsvorlagen" der Eintrag "Code" zur Verfügung:

Code-Highlighting (<pre><code> + Filter)
Bei aktiviertem Filter und entsprechender Einbindung sieht "gehighlighteter" Code so aus:
<h1>Headline</h1>
<p>Paraghraph with <a href="#linktarget" target="_blank">hyperlink</a>.</p>Wie oben erwähnt, gibt es dafür ein Template:

-
-
Standardeinstellung: Aktiviert
Der Filter Multimedia-Plugins sucht in eingegebenen Texten nach Links auf Mediendateien und ersetzt diese durch einen entsprechenden Medienplayer, der entsprechende Steuerungselemente (Abspielen, Pause, Zeitleiste, Lautstärkesteuerung, etc.) bereithält. Gleiches gilt für Medien, die über eine Texteditor-Funktion eingebunden werden.
Der Filter ersetzt auch die HTML-Tags <video> und <audio> durch entsprechende Video- und Audio-Player.
Unterstützte Videoformate:
- mov
- mp4
- m4v
- mpeg
- mpe
- mpg
- ogv
- webm
- flv (flashbasiert, veraltet)
- f4v (flashbasiert, veraltet)
Unterstützte Audioformate:
- aac
- flac
- mp3
- m4a
- oga
- ogg
- wav
-
Filtern von Links zu Mediendateien
Wenn ich einmal den Link zu einer Podcast-Episode (z.B. Campus & Karriere, Deutschlandfunk, Episode vom 08.03.2024) verwende,
https://download.deutschlandfunk.de/file/dradio/2024/03/08/campus_und_karriere_08032024_komplette_sendung_dlf_20240308_1430_85a41e87.mp3und diesen als Hyperlink auf einen beliebigen Text setze,

macht der Filter daraus folgendes:
Gleiches gilt für Video-Links: Aus
https://medienmarmela.de/wp-content/uploads/2022/11/animatedSVGCircleSceenrec.mp4
wird
-
Arbeiten mit den Texteditor-Werkzeugen
Die Moodle-eigenen Texteditoren verfügen beide ebenfalls über Funktionen, mit denen Video- oder Audioinhalte in Textfelder mit entsprechenden Playern eingebunden werden können. Im Editor Atto gibt es einen Button "Audio/Videodatei einfügen", über den sowohl Links zu externen Dateien (Reiter "Link"), als auch lokalen Dateien (Reiter "Video" bzw. "Audio" mit der Option, Dateien hochzuladen) incl. Medienplayer eingebunden werden können:
Im Editor "TinyMCE" heißt der Button "Multimedia", zeigt aber ein sehr ähnliches Menü:

-
Der Kurs "Kursfilter" von Martin Smaxwil ist lizenziert unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz. Weitere Infos finden Sie unter https://moodle.thga.de/cc-lizenzen.








![\sqrt[3]{x^{2}+y^{2}} \sqrt[3]{x^{2}+y^{2}}](https://moodle.thga.de/filter/algebra/pix.php/5f944673c8044108904fec4247b75a70.gif)
















![\phi_n(\kappa) = \frac{1}{4\pi^2\kappa^2} \int\limits_0^\infty
\frac{\sin(\kappa R)}{\kappa R} \frac{\partial}{\partial R} \left[ R^2
\frac{\partial D_n(R)}{\partial R} \right]\mathrm dR \phi_n(\kappa) = \frac{1}{4\pi^2\kappa^2} \int\limits_0^\infty
\frac{\sin(\kappa R)}{\kappa R} \frac{\partial}{\partial R} \left[ R^2
\frac{\partial D_n(R)}{\partial R} \right]\mathrm dR](https://moodle.thga.de/filter/tex/pix.php/2030b19f835c95768f0c76246b180d25.png)




