Tipps & Tricks der #moodlebande

Eintrag in Raw SCSS theme_boost | scss oder in einem <style>-Tag

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

Link zur Startseite aus der Navigationsleiste entfernen

Link zum Dashboard aus der Navigationsleiste entfernen

Hier steht eine ausführliche Erklärung zu den verschiedenen Texteditoren.

Eintrag in Raw initial SCSS theme_boost | scsspre

/* Gesamter Inhalt auf volle Bildschirmbreite */
$course-content-maxwidth: 100% !default;

Alternative:

Über ein Textfeld oder einen Textblock, der auch ausgeblendet sein darf. Mit dem einfachen Texteditor (nicht Atto, nicht TinyMCE) z.B. dies  einfügen:

/* Gesamter Inhalt auf volle Bildschirmbreite */

<style>

.pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner{max-width: unset !important;}

</style>

Eintrag in Raw SCSS theme_boost | scss

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

Farbe der Navigationssymbole + Text auf schwarz ändern. Geht auch in den Farbeinstellungen, aber dann bekommen alle Links diese Farbe und sind bei schwarz nicht mehr von normalem Text zu unterscheiden, daher per Code:

/*Icons Dashboard schwarz*/
.fpstart a[role=button] {  color: #000;
}

In ein Textblock am Seitenrand, so dass alle eine globale Suche haben, da die globale Suche von Moodle selbst nicht zuverlässig funktioniert.

<div style="text-align: left;">
    <strong>Kurse</strong>
    <form action="DEINE DOMAIN/moodle/course/search.php" id="coursesearch" method="get" class="form-inline">
        <fieldset class="coursesearchbox invisiblefieldset">
            <label for="coursesearchbox"></label>
            <input id="coursesearchbox" name="search" size="10" value="" class="form-control" type="text">
            <button class="btn btn-secondary" type="submit">Start</button>
        </fieldset>
    </form>
</div>

.headerbkg {
display: none;
}

Für randlos: Im LearnR Design und dann noch Hintergrundfarbe des Randbereichs auf weiß einstellen.
(theme_learnr | bodybg auf #FFFFFF)

Ich habe den Pfeil kleiner gemacht und den Hintergrund transparent,
Beim Schließen-Button habe ich den Pfeil weggemacht, den Text kleiner und den Hintergrund transparent.

/*Pfeil kleiner */

.fa-2x {
  font-size: 1em;
}

/* Hintergrund und Rand transparent*/
.headerbutton{
 
  background-color: transparent;
  border-color: transparent;
  border-radius: 1rem;
}

/* Schließenbutton transparent */
.blockpanelbutton{
 
  background-color: transparent;
  border-color: transparent;
}

/* Schließenbutton Pfeil weg*/
.blockpanelbutton .fa-arrows-v::before {
  content: "";
}

Den Bereich unten habe ich ebenfalls angepasst.
- Hintergrundfarbe transparent
- Rand weg

/*Hintergrundfarbe Blockbereich Transparent*/

.container-fluid.footerblocks .fp-blocks{
background-color: transparent;}

/*Rand transparent*/
.container-fluid.footerblocks section[role=complementary]
{
border-style: none;
}

Websiteadministration --> Darstellung --> Design --> LearnR --> Allgemeinen Einstellungen

Anzeige in der vollen Fensterbreite (theme_learnr | fullwidthpage) aktivieren, damit Inhalt ganze Breite nutzt.

Websiteadministration --> Darstellung --> Design --> LearnR --> Allgemeinen Einstellungen

Blockleiste anzeigen (theme_learnr | showblockdrawer) aktivieren -> Zeigt ausklappbaren Bockbereich rechts. 

Fußbereich anzeigen (theme_learnr | showfooterblocks) aktivieren -> gibt im Fußbereich 3 Spalten für Blöcke

 Größe der Kurs-Icons (theme_learnr | courseiconsize) auf 30 px -> Icons werden kleiner und damit auch Höhe -> alles wird kompakter.

Hier findest du eine Taskcard mit allen aktuellen H5P-Aktivitäten, Erklärvideos und didaktischen Kommentaren:

https://www.taskcards.de/#/board/4462a244-c7da-4d0c-bbda-1dbe9034d51b

In diesem Git-Hub-Eintrag von TRMSC findest du ein Script, mit dessen Hilfe du an jeder Stelle deines Kurses den Vornamen des Teilnehmenden in einen beliebigen Text einfügen kannst.

Mit diesem Script kannst du Datum und Uhrzeit in einem Textfeld oder einem Textblock anzeigen lassen.

<script type="text/javascript">
    function updateTime() {
        var date = new Date();
        var stunden = date.getHours();
        var minuten = checkTime(date.getMinutes());
        var sekunden = checkTime(date.getSeconds());
        var tag = date.getDate();
        var monatDesJahres = date.getMonth();
        var jahr = date.getFullYear();
        var tagInWoche = date.getDay();
        var wochentag = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
        var monat = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
        var datum = wochentag[tagInWoche] + ", " + tag + ". " + monat[monatDesJahres] + " " + jahr + " " + stunden + ":" + minuten + ":" + sekunden;
        document.getElementById('time').innerHTML = datum;
        setTimeout(updateTime, 1000);
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i
        }; // add zero in front of numbers < 10
        return i;
    }
    window.addEventListener("load", updateTime);
</script>
<p id="time" style="text-align:left; font: 18px Arial, sans-serif;">Datum</p>

Mit diesem Script von TRMSC kannst du Datum und Uhrzeit in einem Textfeld oder einem Textblock anzeigen lassen.

<!-- Date and Time v.1.0.2 - Copyright (C) 2022, TRMSC - https://trmsc1.wordpress.com/ -->
<!-- GNU General Public Licence 3.0 - http://www.gnu.de/documents/gpl-3.0.en.html -->

<!-- YOU CAN WRITE SOMETHING BEFORE AND BEHIND THE SPAN-PARTS OR STYLE THEM -->
<!-- YOU ALSO CAN REPLACE ALL "span" WITH e.g. "h2" TO SHOW DATE AND TIME AS CAPTIONS. -->



<span id="placeDate" style="text-align:left; font: 18px Arial, sans-serif;"></span>&nbsp;
<span id="placeTime" style="text-align:left; font: 18px Arial, sans-serif;"></span>

<script>
    window.addEventListener('load', function(event) {
        let jquery_load_check_interval = setInterval(function() {
            if (window.jQuery) {
                console.log('Date and Time: jQuery v.' + $.fn.jquery + ' loaded');
                console.log('Date and Time: v.1.0.2');
                showTime();
                showDate();
                clearInterval(jquery_load_check_interval);
            } else {
                console.log('jQuery in Moodle: new try to load jquery...');
            }
        }, 150);

        function showTime() {
            if ($("#placeTime").length != 0) {
                console.log('Date and Time: Show time');
                today = new Date();
                let h = today.getHours();
                let m = today.getMinutes();
                let s = today.getSeconds();
                m = checkTime(m);
                s = checkTime(s);
                document.getElementById('placeTime').innerHTML = h + ":" + m + ":" + s;
                setTimeout(showTime, 1000);
            }
        }

        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }

        function showDate() {
            if ($("#placeDate").length != 0) {
                console.log('Date and Time: Show date');
                var dayDetail = new Date();
                var day = dayDetail.getDate();
                var month = dayDetail.getMonth() + 1;
                var year = dayDetail.getFullYear();
                if (day < 10) {
                    day = '0' + day;
                }
                if (month < 10) {
                    month = '0' + month;
                }
                dayDetail = day + '.' + month + '.' + year;
                document.getElementById('placeDate').innerHTML = dayDetail;
            }
        }

    }, false);
</script>

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:

Materialtyp: Datei

Quelle: https://github.com/CreateJS/EaselJS/blob/master/examples/AlphaMaskReveal.html

Anpassungen index.html:
Z. 7 - 11 alle Quellen in den Hauptordner verschoben
Z. 17 - Größe des Bildes an das jeweils verwendete anpassen
Z. 50 - Bildquelle in "tresor.jpg" umbenannt und in den Hautordner verschoben
Z. 62 - Text in Deutsch

Mögliche Anpassungen:
Z. 67 - Größe und Farbe des "Radiergummis" kann geändert werden

Paket zum Download: rubbelloesung.zip (123 KB)

Materialtyp: Datei

Quelle: https://codepen.io/danzen/pen/rNjQWRY

Anpassungen:
index.html
Z. 14 - 16 - Quellen werden direkt aus dem Hauptverzeichnis statt von https://zimjs.org/cdn/ geladen.

script.js
Z. 23 - Das Bild wird ebenfalls aus dem Hauptverzeichnis geladen (brave.jpg mit einer Größe von 1024 x 768 kann direkt ersetzt werden durch ein eigenes, ähnlich großes Bild, andernfalls Dateiname anpassen)
Z. 293 - für die Wiederholung wird auf index.html im Hauptverzeichnis verlinkt

Weitere mögliche Anpassungen in script.js
Z. 93 - 94 - Anzahl der Teile einstellen
Z. 102 - Deckkraft des Hilfsbildes einstellen
ggf. Texte übersetzen

Paket zum Download: jigsaw_neu_ok.zip (674 KB)

#page-mod-label-mod, .header-maxwidth {
    padding: .25rem 0;
    display: flex;
    height: 270px;
    background-image: url("link/zum/Bild");
    background-position: center;
    max-width:unset;
    padding-left: 20px;
}

/* Weiße Schrift mit Schatten für bessere Lesbarkeit des Kursnamens*/
.page-context-header {
font-weight: bold;
height: 300px;
background-size: cover;
color: #fff;
text-shadow: black 2px 2px 4px;    
}

Das Kursbild kann z. B. bei Kurseinstellungen - Kursbild hinterlegt werden.

Folgender Code hilft um einen Floating Button zu erzeugen, der die Tour erneut startet.

Man kann ihn z.B. für einen Hilfe-Button zu Kursbeantragung nutzen.

<a id="resetpagetour" href="#">
<div class="buttonforhelp btn btn-success">
Hier gibt's Hilfe
</div>
</a>

<style>
 .buttonforhelp {
      border: none;
      padding: 5px;
      border-radius: 2px;
      color: white;
      text-align: center;
      text-decoration: none;
      line-height: normal;
      display: inline-block;
      font-size: 20px;
      font-weight: bold;    
position: fixed; bottom: 20px; left: 20px;
z-index: 9999;
      cursor: pointer;}
</style>

Unter Websiteadministration-> Darstellung -> Nutzertouren kann man Nutzertouren anlegen

Um eine Tour zu erstellen, die auf der Seite Kursbeantragung funktioniert, muss man bei "Anwenden auf passende URLs" "/course/request.php%" eingeben.

Dann kann man die Tour bestücken und sie wird angezeigt.

Will man diese mit einem auffallenden Button neustarten können, gibt's dafür einen Trick.

Beim Ein-Themen-Format gibt es die Möglichkeit, Schrift-, Hintergrundfarbe und weitere CSS-Einstellungen der Reiter für Kursabschnitte anzupassen.
Beispiel:

Soll auch die Hervorhebung des aktiven Kursabschnittes (hier orange) rund werden, hilft diese Einstellung:

.nav-link.active {
border-radius:20px !important;
}

Diese Anpassungen und weitere Variationen eignen sich für Textobjekte (Textfelder und Beschreibungen von Aktivitäten), sie sind mit allen Editoren (Atto, TinyMCE usw.) kompatibel:

Überschrift:
<div style="background-image: linear-gradient(45deg, #013d83 0%, #0272f5 20%, #014ea8 50%, #0272f5 80%, #013d83 100%); padding: 10px; border-top-left-radius: 8px; border-top-right-radius: 15px; text-shadow: black 2px 2px 4px; color: #ffffff; text-align: center;">
    <span style="font-size: large;">
        <strong>Überschrift</strong>
    </span>
</div>

Hintergrund:
<div style="background-image: linear-gradient(0deg, #ffffff 0%, #d3e5f9 100%); padding: 5px;">
    Text
</div>

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 eine individuelle Begrüßung oder Anrede (Vorname und/oder Nachname) der Teilnehmer*innen eines Kurses zu ermöglichen, muss in einem Textfeld im Kurs (HTML-Modus </> einschalten) folgender Code (Danke an @TRMSC1 ; Quelle: https://github.com/TRMSC/moodle-editor-inline-codes/blob/main/username-as-variable.html) eingegeben werden:

<!-- Username As Variable v.2.3.1 - Copyright (C) 2022, TRMSC - https://trmsc1.wordpress.com/ -->
<!-- GNU General Public Licence 3.0 - http://www.gnu.de/documents/gpl-3.0.en.html -->
<!-- THIS CODE ADDS THE FIRST USERNAME EVERYWHERE YOU WROTE <span class="fname"></span> IN HTML-MODE -->

<script>
    window.addEventListener('load', function(event) {
        let jquery_load_check_interval = setInterval(function() {
            if (window.jQuery) {
                console.log('Username As Variable: jQuery v.' + $.fn.jquery + ' loaded');
                console.log('Username As Variable: v.2.3');
                makeFirstname();
                makeLastname();
                clearInterval(jquery_load_check_interval);
            } else {
                console.log('Username As Variable: new try to load jquery...');
            }
        }, 150);

        function makeFirstname() {
            var fname = $('.logininfo a:first-of-type').text().split(/\s+/)[0]; /*IF THE LASTNAME WILL BE DISPLAYED TRY [1] INSTEAD OF [0] IN THIS LINE */
            console.log('Username As Variable: firstname is ' + fname);
            $(".fname").text(fname);
            console.log('Username As Variable: firstname added to all positions');
        }

        function makeLastname() {
            var lname = $('.logininfo a:first-of-type').text().split(/\s+/)[1]; /*IF THE FIRSTNAME WILL BE DISPLAYED TRY [0] INSTEAD OF [1] IN THIS LINE */
            console.log('Username As Variable: lastname is ' + lname);
            $(".lname").text(lname);
            console.log('Username As Variable: lastname added to all positions');
        }
    }, false);
</script>

Nach dem Abspeichern erscheint das Textfeld leer - keine Sorge, der Inhalt ist noch da.

Danach kann man in jedem Textobjekt an der gewünschten Stelle folgenden Code einfügen (zum Einfügen kurz den HTML-Modus </> einschalten):

<span class="fname"></span> (liefert den Vornamen)
<span class="lname"></span> (Liefert den Nachnamen)
<span class="fname"></span> <span class="lname"></span> (liefert Vor- und Nachname)

Fertig!

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:

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:

GeoGebra-Aktivitäten in Textobjekten (Textfeld, Textseite, ...) einbinden und anpassen

Erklärvideo bei YouTube (Sven Stemmler)

Hinweis: Sollte die GeoGebra-Aktivität nicht im Textfeld angezeigt werden, so lösche den folgenden Teil des Codes (kurz vor dem Ende):

 applet.setPreviewImage('data:image/gif;base64,R0lGODlhAQABAAAAADs=', 'https://www.geogebra.org/images/GeoGebra_loading.png', 'https://www.geogebra.org/images/applet_play.png');

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florain Dagner

Link zur Website von Florain Dagner

Link zur Website von Florain Dagner

Link zur Website von Florain Dagner

Link zur Website von Florian Dagner

Link zur Website von Florain Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Dieses Werk von Harald Zigala ist lizenziert unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.

LaTeX-Kurs Teil 0

LaTeX-Kurs Teil 1

LaTeX-Kurs Teil 2

LaTeX-Kurs Teil 3

LaTeX-Kurs Teil 4

Wer eine neue H5P-Aktivität anlegen möchte und dies nicht (komplett) über LUMI machen und nicht über den Inhaltsspeicher gehen möchte, der kann dies mit einem kleinen Trick erreichen:

• Erstelle mit LUMI deine favorisierten H5P-Aktivitäten nur im Ansatz (Titel, ...) und speiche diese Aktivitäten auf deinem Computer ab.
• Erstelle in moodle eine neue H5P-Aktivität.
• Lade die gewünschte der fertigen Aktivitäten als Datei hoch und wähle "Speichern und anzeigen".
• Wähle unterhalb der Aktivität den Link "H5P-Inhalt bearbeiten". Nun kannst du in moodle die Aktivität bearbeiten, verändern und fertigstellen.
  

Wenn man das Dashboard für alle anpassen will, aber für unterschiedliche Rollen ein unterschiedliches Dashboard anzeigen will z.B. für Lehrkräfte ein anderes, als für S:S,  dann geht das.

Wichtig. Dafür müssen die Nutzer:innenkonten unterscheidbar sein, also brauchen die Personengruppen unterschiedliche Rollen - auf Systemebene.
Die Rollen Trainer:in, Teilnehmer:in sind nur auf Kursebene. Außerhalb des Kurses sind wir alle gleich - das müssen wir ändern.

1. Systemrolle anlegen. z.B. SysLehrer (und SysSchueler falls man mehr Unterscheidungen machen will.)

Website-Administration --> Nutzer/innen --> >Rechte --> Rollen verwalten --> Neue Rolle hinzufügen.

Beispiel für Sys_Schüler

2. Dashboard designen, mit allem was irgendwer sehen soll (Dashboard für alle anpassen)

Wichtig: Bei der Blockplatzierung des Blocks muss folgendes eingestellt sein:

"Seiten auswählen: Jede zur obigen passende Seite", sonst funktioniert es nicht.

Beispiel:

3. Bei Blöcken, die von nicht allen gesehen werden sollen, müssen wir die Rechte ändern:
    1. Bearbeiten einschalten
    2. Zahnrad des Blockes anklicken -> Rechte
    3. Rechte so anpassen, dass nur bestimmte Rolle den Block sehen
            a) Entweder Rollen die nicht sehen sollen bei Verbieten hinzufügen (Durch Klicken auf das "+")
            b) Wenn nur eine bestimmte Gruppe sehen soll, dann diese Gruppe bei "Rollen mit Rechten" hinzufügen, aber Achtung alle haben automatisch die Rolle "Authentifizierte/r Nutzer/in", die müsste man dann bei den Rechten hier rausnehmen.


Ich empfehle a). Variante b) macht nur Sinn, wenn man sehr sehr viele unterschiedliche Gruppen hat von denen nur eine einen Block sehen soll

4. Zuweisung der Rollen per CSV-Upload:

Eine mögliche Variante, allen SuS und LuL die Rolle Sys_Schüler und Sys_Lehrer zuzuweisen, ist über den CSV-Upload.

a) Download der aller User:innen in CSV-Datei

Website-Administration --> Nutzerverwaltung (Bulk)

Alle verfügbaren auswählen und unten auf Download (Excel oder opendocument).

b) Anpassen des Datensatzes

Vorhandene Liste nach Lehrer:in und Schüler:in sortieren.

Dann alle Einträge im Tabellendokument löschen, außer "id" "username" "firstname". Ergänze die Spalte "sysrole1".

Als CSV-Datei speichern.

c) Upload der Userliste

Website-Administration --> Nutzer/innen --> Nutzerliste hochladen

Upload-Typ "nur vorhandene aktualisieren" auswählen

Weitere Infos zum CSV-Upload von User:innen gibt es hier:

https://docs.moodle.org/400/de/Nutzerliste_hochladen

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;
   }

Bei Bedarf kann in einem Kurs verhindert werden, dass die Navigation links oder/und die Blöcke rechts eingeblendet werden können:

/* Einblenden der Navigation links verhindern */
<style>
.drawer-left-toggle, .drawer-left {
   display:none;
   }
</style>
<script>
setTimeout(function() { $('.drawer-left.show .drawerheader button').click(); }, 1000);
</script>

/* Einblenden der Blöcke rechts verhindern */
<style>
.drawer-right-toggle, .drawer-right {
   display:none;
   }
</style>
<script>
setTimeout(function() { $('.drawer-right.show .drawerheader button').click(); }, 1000);
</script>

@TRMSC1 hat für die etwas leicht zu übersehenden Dropdownmenüs / Auswahllisten einen Hinweis gestaltet. Seinen Code findet ihr hier:

https://github.com/TRMSC/moodle-css-styling/blob/main/general/settings/dropdown-badge.css

Ein Erklärvideo von Dag Klimas (@dag_moodle) dazu findet ihr hier:

Dieser Code macht das selbe, aber nicht im Kursbereich, sondern nur im Kurs (und im Bereich "Rechte").

.urlselect:not([class*="w-100"]):after {
   content: "Weitere Optionen verfügbar";
   font-size: small;
   font-weight: bold;
   background-color: var(--warning);
   border-radius: 5px;
   padding: 0px 5px 1px 5px;
   }

https://www.taskcards.de/#/board/a29aa0a2-38bb-4a9a-90e1-4c38ec47f9cc/view?token=8d6e8433-486a-4717-85ee-d721aefcadb1

Hier findest du eine Taskcard mit einigen inoffiziellen H5P-Inhaltstypen, die schon genutzt werden können:

https://www.taskcards.de/#/board/95d50e01-d7af-4eef-9906-3389235e4163

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)

Kleines nachvollziehbares Script für abwechslungsreichere Begrüßungen nach jedem Seitenaufruf von Florian Dagner.

Dieses Script von Florian Dagner in einem Textblock oder Textfeld erstellt einen Timer.

Nach Update ist das Gridformat nicht mehr zentriert - mit folgendem Code lässt sich das beheben:

.thegrid {
   justify-content: center !important;
   }

Unterschied siehe unten.

In diesem Kurs des LMZ BW erhalten Sie zunächst eine Einführung in eine Reihe von H5P interaktiven Inhalten und können im Anschluss verschiedene Aufgabentypen kennenlernen und selbst ausprobieren. Der Kurs gliedert sich in einfache H5P Aktivitäten und interessante H5P Quiz Aufgaben. H5P interaktive Inhalte lassen sich unkompliziert im eigenen Fernunterricht mit Moodle umzusetzen. Am Ende des Kurses warten auf Sie Gestaltungstipps und weitere Anregungen.

https://wakelet.com/wake/Efe8O1kTJwM38fC1xlPWD

https://moodlelab.moodleschule.de/

Link zur Website von Florian Dagner

https://moodle.moove-bw.de/moodle/

https://svenstemmler.de/moodlekurse.php

https://moodle.svenstemmler.de/

https://moodle4.svenstemmler.de/

https://svenstemmler.de/moodlekurse.php

https://mathebbs.de/moodle/moodle-kurse.php

https://lehrerfortbildung-bw.de/demo2/

https://ideenwolke.net/interaktive-und-mehrsprachige-mathematik-selbstlernkurse/

https://www.uni-koblenz-landau.de/de/landau/fb7/mathematik/arbeitsgruppen/didmathsek/projekte/ak-mss/differentialrechnung

ANLEITUNG: ERSTELLUNG EINER RUBRIK IN DER AUFGABE BEI MOODLE

#page-header .page-header-headings {
   display:none;
}
.breadcrumb {
   display:none;
}
#page-header .card {
   background-image: url("https://xxx.yy/picture.jpg");
   background-size:cover;
   background-color: #efefef;
   background-repeat: repeat-x;
   height:200px;
}

Anleitung

Anleitung 1 von @bauschlagge

Anleitung 2 von @bauschlagge

Baukasten von @13Maryj

Dadurch werden die Checkboxen beim Feedback größer (Dank an @MatthiasRke)

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".

Das Level-Up! Plugin ist schon eine ganz interessante Möglichkeit um einen spielerischen Moment in den moodle-Kurs reinzubekommen.

Leider ist das Bild des Abzeichen standardmäßig recht klein dargestellt und dabei wäre eigentlich viel mehr Platz vorhanden. Aber das kann man leicht regeln.

Fügen Sie an geeigneter Stelle auf der Kursseite folgenden CSS-Code ein:

Die Breite von 200px kann natürlich nach Wunsch verändert werden.

Textblöcke können verwendet werden, um CSS-Klassen überall im Kurs zu verwenden. Dann stören aber eventuell die Blöcke, weil Sie bei Boost rechts Platz einnehmen.

Hier eine Anleitung, wie man einen Block unten platziert und unsichtbar macht. https://www.superlehrer.de/2022/04/22/moodle-mit-css-aufwerten-nutzung-von-bloecken/

Das "unten platzieren" ist aber nur notwendig, wenn man keine anderen Blöcke verwendet.

EIne bestimmte Anzahl an Spalten kann man fest vorgeben, bei dem sich der Text automatisch in den Spalten verteilt, indem man als style verwendet:

column-count: 2;

... oder wieviele man auch immer will. Das kann man vermutlich unterschiedlich anwenden, hier habe ich eine Liste mit Aufgabe zweispaltig gemacht, um Platz zu sparen.

----------

--------------

Damit ich mich nicht auf eine bestimmte Spaltenanzahl festlegen muss (abhängig von der Bildschirm-Breite) gibt es eine Lösung von Dag Klimas als Video.

Er trägt es als Admin ein, aber das könnte man sicher auch in einen CSS-Block als einfacher Trainer eintragen und dort nutzen.

https://mathematikonline.at/

moodle kann auch Dark Mode - hier zuerst ein Video von Dag Klimas dazu ...

... und hier ein Blogbeitrage von Matthias Giger zum Thema:

"Dark Mode" für Moodle