Tipps & Tricks der #moodlebande

https://mathematikonline.at/

https://svenstemmler.de/moodlekurse.php

https://moodle.svenstemmler.de/

https://moodle4.svenstemmler.de/

https://svenstemmler.de/moodlekurse.php

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

Frage von Nele Hirsch, @ebildungslabor@digitalcourage.social:

Wenn ich das 'Ein Themen-Format' mit den Tabs nutze und in meinem Kurs obere und untere Abschnitte/ Tabs haben, gibt es dann eine halbwegs einfache Möglichkeit, dass bei den oberen Tabs jeweils der Tab als 'aktiv' angezeigt wird, in dessen Unter-Tabs ich als Nutzerin gerade lerne?

Antwort von Florian Dagner, @floriandagner@bildung.social:

Eine Lösung ist ein geschlossenes und geöffnetes Ordnersymbol zu verwenden. Vor allem bei vertikalen Tabs eine gute Lösung. Das könnte man eventuell in der Standardansicht auf die oberen Abschnitte beschränken. CSS für Moodle 4:

<style>

.format-onetopic .format_onetopic-tabs .nav-link:before { font-family: "Font Awesome 6 Free"; content: "\f07b"; }

.format-onetopic .format_onetopic-tabs .nav-link.active:before { font-family: "Font Awesome 6 Free"; content: "\f07c"; }

</style>

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>

Wie kann man einen Link aus einem Unterkurs auf einen Stammkurs setzen? (Danke an Matthias Giger)

Code im Stammkurs (oder mehreren Kursen), z.B. in einem Text- und Medienbereich oder einem Textblock (Editor "Einfacher Text"):

<script>
localStorage.setItem("StammkursURL", window.location.href);
</script>

Code im Unterkurs, z.B. in einem Text- und Medienfeld (Editor "Einfacher Text"):

<div><button class="btn btn-primary" onclick='window.location.href = localStorage.getItem("StammkursURL")'>Zurück zum Stammkurs</button></div>

Link zur Startseite aus der Navigationsleiste entfernen

Link zum Dashboard aus der Navigationsleiste entfernen

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.

@trmsc hat eine Möglichkeit programmiert, das Öffnen des Kursindex aus dem Content zu ermöglichen:

Ihr findet den Code hier.

Rechengebirge visualisieren die Reihenfolge der Rechenschritte bei Rechnungen mit verschiedenen Operationen.

Datei herunterladen, um diese in der eigenen Moodle-Instanz zu verwenden.

Falls weitere Symbole benötigt werden, können diese über eine case-Anweisung im Javascript-Quellcode ergänzt werden. 

case "," :
    zeichenkette=zeichenkette+"<span class='ziffer'>"+schritt+"</span>"
break;

Die Formatierung des Elements erfolgt dann über eine CSS-Klasse.

.ziffer {background-color:lightgray;padding:0.2em;}

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)

ANLEITUNG: ERSTELLUNG EINER RUBRIK IN DER AUFGABE BEI MOODLE

Es ist nicht schwer, in seinem Kurs oder auf der gesamten moodle-Seite Schneeflocken (oder Clowns, Einhörner, Feenstaub, ...) rieseln zu lassen, indem man den folgenden Code (im HTML-Modus) in ein Textfeld kopiert:

<style>
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<div class="snowflakes" aria-hidden="true">
  <div class="snowflake">❅</div>
  <div class="snowflake">❆</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❆</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❆</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❆</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❆</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❆</div>
</div>

Link zur Website von Florian Dagner

Man kann alle Tabellen, aber insbesondere die in der Listenansicht von Datenbanken, sortierbar machen:

Eine Möglichkeit ist https://www.kryogenix.org/code/browser/sorttable/ (Anleitung durchlesen!) (ist in Hessen in den SchulMoodle integriert, man kann also Tabellen sortierbar machen)

It's possible to show a symbol in a sortable table's column headers to indicate that the table is sortable. To do this, add a bit of CSS to your stylesheet:

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { content: " \25B4\25BE" }

Note that this requires support for CSS generated content, which needs a modern-ish browser. You can, of course, change the generated content to whatever you want.

Beispielkurs mit Beispieltabelle: https://mo1300.schule.hessen.de/course/view.php?id=42

(Dank an @rettiwtaccount@mastodon.cloud)

Man sollte in sorttable.js (Quelle https://www.kryogenix.org/code/browser/sorttable/) bei den Zeilen 262 und 264 den Punkt durch Komma ersetzen, damit Kommazahlen auch in unserem Zahlenformat korrekt sortiert werden.

(Dank an @fusion@mastodon.social)

Link zur Website von Florian Dagner

So kann man erreichen, dass man in der Aktivität Test erst die erste Frage einer Seite richtig beantworten muss, bevor man zu nächsten Seite/Frage weitergehen kann.

1. Test erstellen

2. Am besten nur eine Frage auf eine Seite (Code nutzt die Auswertung der ersten Frage einer Seite)

3. Navigation vorgegeben einstellen

4. Code unten in einen Textblock auf der Fragenseite kopieren (Editor ausschalten)

<p>Du musst diese Frage erst richtig beantworten, bevor du weiter gehen kannst.</p>

<style>

    .submitbtns {visibility:hidden}

</style>

<script>

    setTimeout(()=>{

        grades = document.querySelector(".grade");

        var punkte = grades.innerText.split(" ");

        if (punkte[2]==punkte[4]) { 

            document.querySelector(".submitbtns").style.visibility="visible";

            console.log("Grades. "+grades.innerText)

        }

    },1000);

</script>

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.

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

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

Wenn man Text in einem Textfeld geschickt kodiert, kann man - abhängig von der in moodle eingestellten "Systemsprache" - Text in verschiedenen Sprachen anzeigen lassen:

<span lang="de" class="multilang">Hallo!</span>
<span lang="en" class="multilang">Hello!</span>

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>

Auf der Basis des folgenden CSS-Codes lassen sich die Abschnittsüberschriften im Themenformat gestalten:

<style>
.course-section-header
{background: rgb(48,91,131);
background: linear-gradient(138deg, rgba(48,91,131,1) 0%, rgba(152,207,235,1) 92%);;
padding: 20px; 
font-family: Verdana, bold;
color: white;
font-size: 15px;
border-radius: 40px 0px 40px 0px;
}
</style> 

Dank an @FrauSpeckner : https://bildung.social/@FrauSpeckner/110909679224513293

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

Mit diesem kleinen Codeschnipsel in einem Textfeld (HTML-Modus einschalten) kann man die Textfarbe der Überschriften in einem Universellen Textfeld / Eingeklappter Text ändern:

<style>
.unilabeltype-collapsed-dialog-button a {
   color: #ff0000;
   font-size: 1.5rem;
   font-weight:400;
}
.unilabeltype-collapsed-dialog-button a:hover {
  color: #ff0000;
  font-size: 1.5rem;
  font-weight:400;
  text-decoration: underline;
}
.modal-title {
   color:#ff0000;
   font-size: 1.5rem;
   font-weight:400;
}
.unilabel-title {
   color:#ff0000;
   font-size: 1.5rem;
   font-weight:400;
}
.unilabeltype-collapsed a:hover{
   color:#ff0000;
   font-size: 1.5rem;
   font-weight:400;
   text-decoration: underline;
}
span.unilabeltype-collapsed-caret::after{
   color:#ff0000;
   font-size: 1.5rem;
   font-weight:400;}
</style>

Auch folgende Änderungen sind möglich:

<style>
.unilabel-title {
background-color: #4BA5D0;
border: none;
color: white;
// padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.25rem;
// border-radius: 20px;
// box-shadow:  0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transition-duration: 0.4s;
}
.unilabel-title:hover {
background-color: #3B8590;
color: white;
}

.modal-title {
// font-size: xx-large;
font-size: 1.25rem;
color: white;
text-decoration: underline;
}
</style>


<style>
.unilabeltype-collapsed-dialog-button a {
background-color: #4BA5D0;
border: none;
color: white;
// padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.25rem;
// border-radius: 20px;
// box-shadow:  0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transition-duration: 0.4s;
}

.unilabeltype-collapsed-dialog-button a:hover {
background-color: #3B8590;
color: white;
}

.modal-title {
// font-size: xx-large;
font-size: 1.25rem;
color: #000000;
}

.modal-lg, .modal-xl {
  max-width: 1090px;
}
</style>


<style>
.no-overflow {
  overflow: auto;
font-size: 1.25rem;
}
</style>

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

Link zur Website von Florian Dagner

Erklärvideo von Dag Klimas (@dag_moodle)

Link zur Website von Florian Dagner