Tipps & Tricks der #moodlebande

Link zum ausführlichen moodle-Kurs

Mit folgendem Selektor kann man in moodle 4.x verborgene Abschnitte ansprechen. Im Beispiel wird der Hintergrund eines verborgenen Abschnittes gelb gefärbt.

.section.hidden {
   background-color: yellow;
   }

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Viele UserInnen wünschen sich, dass bei der Aktivität "Datei" der Dateityp durch ein MIME-Symbol angezeigt wird.

Die folgenden Änderungen im moodle-Code in der Datei /mod/resource/locallib.php lassen die Symbole anzeigen, allerdings nicht statt, sondern zusätzlich zum blauen Aktivitätssymbol:

Quelle: https://moodle.org/mod/forum/discuss.php?d=434156

In Moodle kann man die Dateisymbole wie folgt anpassen (funktioniert in Webbrowsern die den :has-Pseudoselektor unterstützen):

<style>
.imageicon, .mp4icon, .pdficon, .mp3icon, .mswordicon {font-size:2em;}
.imageicon::before {content:'?️';}
.mp4icon::before {content:'?'}
.pdficon::before {content:'?'}
.mp3icon::before {content:'?'}
.mswordicon::before  {content:'?'}
</style>
<script>
    changes = document.querySelectorAll(".activity-item:has(.resourcelinkdetails)");
    changes.forEach(change => {
        console.log(change.innerText.includes("MP3"))
        if (change.innerText.includes("MP3")) {
            console.log("MP3 found, looking for image ...");
            change.querySelector(".courseicon:has(img[alt='resource icon'])").innerHTML = '<span class="mp3icon"></span>';
        }
        console.log(change.innerText.includes("Word 2007"))
        if (change.innerText.includes("Word 2007")) {
            console.log("Word 2007 found, looking for image ...");
            change.querySelector(".courseicon:has(img[alt='resource icon'])").innerHTML = '<span class="mswordicon"></span>';
        }
        console.log(change.innerText.includes("PDF"))
        if (change.innerText.includes("PDF")) {
            console.log("PDF found, looking for image ...");
            change.querySelector(".courseicon:has(img[alt='resource icon'])").innerHTML = '<span class="pdficon"></span>';
        }
        console.log(change.innerText.includes("MP4"))
        if (change.innerText.includes("MP4")) {
            console.log("MP4 found, looking for image ...");
            change.querySelector(".courseicon:has(img[alt='resource icon'])").innerHTML = '<span class="mp4icon"></span>';
        }
        console.log(change.innerText.includes("Image ("))
        if (change.innerText.includes("Image (")) {
            console.log("IMG found, looking for image ...");
            change.querySelector(".courseicon:has(img[alt='resource icon'])").innerHTML = '<span class="imageicon"></span>';
        }
    });
</script>

Da das Script die Dateiinformation abgreift, muss diese auf Administrations-, Kurs- und Aktivitätsebene eingeschaltet werden.

Das sieht dann beispielsweise so aus:

Du kannst auf Aktivitätsseiten Aktivitätslogo und -bezeichnung ausblenden:

/* Auf Aktivitätsseiten Aktivitätslogo nicht anzeigen */
.page-header-image.mr-2 {
   display: none;
   }

/* Auf Aktivitätsseiten Aktivitätslogo kleiner anzeigen */
.activityiconcontainer {
  width: 35px;
  height: 35px;
  }

/* Auf Aktivitätsseiten Aktivitätsbezeichnung nicht anzeigen */
.text-muted.text-uppercase.small.line-height-3 {
   display: none;
   }

Und hier noch ein Erklärvideo von Dag Klimas (@dag_moodle)

In jeder Aktivität kannst du Schüler*innen Bearbeitungsrechte zuweisen und ihnen damit die Möglichkeit geben, aktiv an deinem Kurs mitzuarbeiten und damit Lernleistungen zu erbringen.

So ist es z.B. möglich, dass du eine "leere" H5P-Aktivität anlegst und diese einer/m Schüler.in zur Bearbeitung freigibst. Die/der Schüler*in kann dann z.B. als Lernleistung die Aktivität mit Inhalt füllen (einfache Inhaltstypen wie z.B. "Multiple Choice", "Quiz (Question Set)", ... aber auch "Course Presentation" bieten sich hier an).

Vorgehen

• Wähle rechts neben der Aktivität den Link "Bearbeiten".
• Wähle im Menu den Eintrag "Rollen zuweisen".
• Wähle im folgenden Dialog den Link "Lehrer/in" oder "Trainer/in".
• Wähle im folgenden Dialog in der rechten Liste den Namen des/der Schüler*in aus, die/der Bearbeitungsrechte bekommen soll.
• Wähle in der Mitte den grauen Button "Hinzufügen".
• Navigiere zurück zum Kurs.

Die/der Schüler*in hat nun die Möglichkeit, (nur!) für diese Aktivität über "Einstellungen bearbeiten" den Inhalt zu bearbeiten.

Du kannst - während die/der Schüler*in an der Aktivität arbeitet - die Aktivität auch für die anderen Schüler*innen verbergen:

• Navigiere in die "Einstellungen" der Aktivität.
• Wähle im Abschnitt "Voraussetzungen" den grauen Button "Voraussetzung hinzufügen".
• Wähle im folgenden Dialog den grauen Button "Nutzerprofil".
• Stelle im folgenden Dialog "Feld im Nutzerprofil" "Nachname" "ist gleich mit" ein und trage in das hintere Eingabefeld den Nachname des/der Schüler*in ein.
• Wähle das Auge, so dass dieses durchgestrichen ist.
• Wähle den blauen Button "Speichern und zum Kurs".

Was müssen die Schüler*innen machen?

• Wähle die Aktivität "...", die du bearbeiten möchtest.
• Falls vorhanden: Stelle rechts oben den Schalter "Bearbeiten" nach rechts. Bei (blauen) H5P-Aktivitäten reicht die Wahl von "Dieses H5P bearbeiten".
  
• Wähle im oberen Menu den Eintrag "Einstellungen bearbeiten". Nun kannst du den Inhalt der Aktivität bearbeiten.
• Wähle am Ende deiner Arbeit unten den blauen Button "Speichern und anzeigen".

Eintrag in Raw SCSS theme_boost | scss

Eintrag in Raw SCSS theme_boost | scss

Eintrag in Raw SCSS theme_boost | scss

Eintrag in Raw SCSS theme_boost | scss

Eintrag in Raw SCSS theme_boost | scss

Die Buttons zum Verschieben von Aktivitäten sind eventuell versteckt hinter den Icons der Aktivitäten und lassen sich schwer klicken. Man kann die Buttons links neben den Buttons klicken, das klappt gut - wenn man es weiß.

Oder man verschiebt die Verschiebebuttons nach links z.B. mit:

Mit diesem Code kannst du eine Analoguhr in einem Textfeld oder einem Textblock anzeigen lassen.

Quelle: https://commons.wikimedia.org/wiki/File:Animated_analog_SVG_clock.svg

Um die rechts abgebildete Analoguhr im Kurs anzuzeigen, muss in einem Textfeld im Kurs (HTML-Modus </> einschalten) folgender Code (Quelle: http://www.3quarks.com/de/SVGUhr/index.html) eingegeben werden:

Analoguhr mit Gong als Textfeld oder Materialtyp Datei
Uhrzeiten für den Gong entsprechend durch copy&paste der "else if"-Bedingungen ergänzen und Zeitangaben anpassen. Das ist zwar nicht so elegant wie ein Algorithmus, dafür aber leichter verständlich.
Zahlen für die Uhrzeiten werden ohne führende 0 geschrieben.
Die Sec-Angabe ist wichtig, sonst wird der Gong eine Minute lang wiederholt.
In der aktuelle Einstellung gongt es jede Minute, zwei weitere Beispiele sind als Kommentar vorgegeben.
Als Audiodatei wird hier https://klingeltonekostenlos.de/schulgong/ (Urheberrecht s. d.)verwendet.
Bei iFrames in moodle-Textfeldern den Pfad entsprechend anpassen z. B.: https://mein_moodle/draftfile.php/1234/user/draft/1234/Schulgong.mp3

Der Code zwischen dem öffnenden <script.. und dem schließenden ...</script> kann auch in anderen HTML/SVGs verwendet werden.
Der verwendete JavaScript-Code (im HMTL enthalten):   
<script type="text/javascript">// <![CDATA[
const AUDIO = {
        GONG: new Audio('./Schulgong.mp3')
    };
    var d;
    var str;
    function getClock()
    {
    d = new Date();
    str = Calculate(d.getHours(), d.getMinutes(), d.getSeconds());
    }

    function Calculate(hour, min, sec)
    {
        if (sec == 0)  {
        AUDIO.GONG.play();
        }
// Gong um 8:45 Uhr
//        else if (hour = 8 && min == 45 && sec == 0)  {
//        AUDIO.GONG.play();
//        }
// Gong um 9:30 Uhr
//        else if (hour = 9 && min == 30 && sec == 0)  {
//        AUDIO.GONG.play();
//        }
    }
    setInterval(getClock, 1000);
// ]]></script>

Um die rechts abgebildete Analoguhr im Kurs anzuzeigen, muss in einem Textfeld im Kurs (HTML-Modus </> einschalten) folgender Code (Quelle: https://freesvg.org/animated-clock-image) eingegeben werden: