Tipps & Tricks der #moodlebande

Bei einer umfangreichen Checkliste (Plugin https://moodle.org/plugins/mod_checklist) kann es schwierig werden, auf einem kleinen Bildschirm den Überblick zu behalten. 

Der folgende CSS-Code sorgt dafür, dass die Spalte mit den Namen fixiert wird.

<style>
tr>th:first-child,tr>td:first-child {
  position: sticky;
  left: 0;
}
tr:nth-child(odd) td {
   background: #fefeff;
}
tr:nth-child(even) td {
   background: #f6f6f7;
}
</style>

Diesen bettet man am besten über Einstellungen direkt in den Kopf der Checklisten-Aktivität ein.

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>

Man kann die Schrift in einem Kurs (oder für Profis: auf der gesamten Instanz) ändern (Dank an @FrauSpeckner). Hier am Beispiel der Grundschulschrift von @FrauSpeckner :

• Lade dir von dieser Seite http://2ttf.com/Atj1My9YsiY die Datei "GrundschulschriftDS.tff" herunter
• Lade diese Datei in deinen moodle-Kurs in die Aktivität "Datei" hoch. Du kannst die Aktivität verbergen, musst sie aber im Kurs verfügbar machen.
• Besorge dir den Download-Link: Den Link zu der Datei erhält man, indem man unter "Einstellungen -> Darstellung" die Option "Download erzwingen" wählt, sich dann die Datei anzeigen lässt und dort den angezeigten Link kopiert. Nach dem Einfügen des Links (später) muss man unbedingt am Anfang des Links "https:" und am Ende des Links "?forcedownload=1" löschen.
• Lege in deinem moodle-Kurs z.B. einen Textblock an und bezeichne ihn mit "CSS". Texteditor auf "Einfacher Text" ändern.
• Kopiere in diesen Textblock den folgenden Code:

  <style>
@font-face {
    font-family: 'GrundschulschriftDS';
    src: url('//2ttf.com/webfont/Atj1My9YsiY/webfont.ttf') format('truetype');
}

  /* sample using the font */
body{
    font-family: 'GrundschulschriftDS';
}</style>

• Ersetze in der Zeile mit src: url den Teil "//2ttf.com/webfont/Atj1My9YsiY/webfont.ttf" durch den Link zur Datei, z.B. "//selbstlernmaterial-moodle.de/.../GrundschulschriftDS.tff". Und wie gesagt: ?forcedownload=1" löschen
• Ergänzung: Wenn du im Code statt "body" z.B. "div.grundschulschrift" schreibst, erscheint die neue Schrift nur dort, wo du das Tag "<div class="grundschulschrift">...</div> nutzt.
• Ergänzung: Profis können die .tff-Datei auch in Base64 kodieren und direkt mit dem Code einfügen; dann kann die Aktivität "Datei" natürlich entfallen.

Dag Klimas (dag_moodle@mastodon.social) erklärt in

Der Code, um die Aktivitätsicons zu verbergen, kann so aussehen

<script type="text/javascript">

// <![CDATA[

var cssRules = '.activityiconcontainer {display: none!important;} .activity-item {font-size: 1.2rem!important;}';

var styleElement = document.createElement('style');

styleElement.appendChild(document.createTextNode(cssRules));

document.getElementsByTagName('head')[0].appendChild(styleElement);

// ]]>

</script>

oder aber so (Danke an fusion@mastodon.social) (Editor auf Nur Text  umstellen)

<style>

.activityiconcontainer {display: none!important;}

.activity-item {font-size: 1.2rem!important;}

</style>

https://github.com/margomius/moodle-database-generator

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

Ihr findet den Code hier.

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

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)

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>

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>

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:

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

Link zum ausführlichen moodle-Kurs

Erklärvideo von Dag Klimas (@dag_moodle)

Mit den folgenden Codeschnipseln lassen sich die Kacheln formatieren (Editor in den Textmodus)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    // Formatierung der Kacheln
    // <![CDATA[
    $(document).ready(function() {
        $('ul.tiles .tile').css('border-radius', '0.25rem');
//        $('ul.tiles .tile').css('background-image', 'linear-gradient(0deg,#cfe2f3 0%, #cfe2f3 100%)');
        $('ul.tiles .tile').css('background-image', 'linear-gradient(0deg,#f2f2f2 0%, #f2f2f2 100%)');
//        $('ul.tiles .tile').css('border-top-color', '#cfe2f3');
        $('ul.tiles .tile').css('border-top-color', '#f2f2f2');
        $('ul.tiles .tile').css('border-top', '.0em solid #0000');
        $('ul.tiles .tile').css('max-height', '120px');
        $('.format-tiles .tileiconcontainer .icon').css('width', '42px');
        $('.format-tiles .tileiconcontainer .icon').css('height', '42px');
        $('.tile-text').css('height', '70px');
        $('.tile-text').css('margin-top', '-15px');
//        $('.tile-text').css('font-size', '1.0rem');
//        $('.tile-text').css('font-weight', '600');
        $('.photo-tile-text h3').css('color', '#083a66');
        $('.photo-tile-text h3').css('background-color', 'rgba(0,0,0,0)');
        $('.photo-tile-text h3').css('font-size', '1.25rem');
        $('.photo-tile-text h3').css('font-weight', '400');
    });
    // ]]>
</script>

<style>
.format-tiles .sectiontitle::after, .format-tiles .badge-info {
    background-color: rgb(204, 204, 204);
}
</style>

<!--
<style>
.tile.current::after {
content: "Aktuelles Thema";
background-color: rgba(255,0,0, 0.7);
color: rgba(255,255,255,.85);
padding: 2px 7px 2px 7px;
position: absolute;
bottom: 40px;
left:0px;
font-size:1.1em;
text-align:center;
 width: 100%;
}
</style>
-->

<style>
.tile.current::after {
content: "!";
background-color: rgba(255,0,0,0.25); // rgba(15,108,191, 0.25);
border-radius:0.25rem;
color: rgba(0,0,0, 0.0);
padding: 2px 7px 2px 7px;
position: absolute;
bottom: 0px;
left:0px;
font-size:78px; // 6.0em;
text-align:center;
width: 100%;
}
</style>

<!-- Aktuelles Thema - aktueller Abschnitt -->

<!-- <style>
#aktuellesthema {
color: rgba(255,255,255,1.0);
background-color: #ff0000;
text-align: center;
display:inline;
padding: .375rem .75rem;
}

 #aktuellesthema::before {
 content: " ";
 height: 120px;
 margin-top: -120px;
}
</style>
-->

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

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>

Changelog für Teilnehmer/innen

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

Es ist nicht schwer, in einen Kurs einen Button als Overlay einzufügen, mit dem die Lernenden bei Bedarf zu einer (Hilfe-)Seite oder einem (Hilfe-)Forum oder ... gelangen können. Dazu muss nur der folgende Code (im HTML-Modus) in ein Textfeld eingefügt werden:

<a href="URL zur Seite oder Aktivität">
     <div style="position:fixed; bottom:20px; right:20px; z-index:9999">
          <img style="width:50px" src="data:image/png;base64,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" alt="Hilfe-Forum">
     </div>
</a>

Der Button als .png-Datei befindet sich im Anhang.

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>

Wenn der Text "Formular ausfüllen" des Buttons bei einem Feedback nicht passt, kann man den Text z.B. in  "Wählen" umändern. (Dank an TRMSC!)

Codeschnipsel hierzu unter https://github.com/TRMSC/moodle-editor-inline-codes/blob/main/activities/feedback-button.html

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

Bietet die möglichkeit,

<script>

    setTimeout(function() {

        $('#page').append($(' <a href="Link bspw. zur Kursstartseite" title="Link bspw. zur Kursstartseite"> <div style="position: fixed; bottom: 20px; right: 20px; z-index: 9999;">  <img style="width: 100px;" src="Bild, dass der Floating-Button anzeigen soll" alt="Beschreibung des Bildes" width="100" height="100" class="img-fluid atto_image_button_text-bottom"> </div></a>'));

    }, 1000);

</script>

Bei den meisten moodle-Aktivitäten kann man den Nutzer*innen die "Trainer/in"-Rolle zuweisen, so dass die Nutzer*innen die Aktivitäten wie Trainer*innen bearbeiten können.

Das geht bei Textfeldern nicht, genauer gesagt kann man zwar die "Trainer/in"-Rolle zuweisen, dies hat aber zuerst einmal keine Auswirkung, weil die Nutzer*innen nicht in den Bearbeitungsmodus gelangen. Dies kann man aber - nachdem man Nutzer*innen die "Trainer/in"-Rolle für das Textfeld zugewiesen hat - mit einem Trick erreichen:

• Gehe als Trainer/in in den Bearbeitungsmodus des Textfeldes
• Kopiere aus der Adresszeile die URL des Textfeldes in der Form "https://...../course/modedit.php?update=xxxx"
• Lege in dem Textfeld einen Link mit dem Text "Bearbeiten" und der kopierten URL an. Formatiere diesen Link evtl. am unteren rechten Rand des Textfeldes.
• Fertig!

Wenn nun ein*e Nutzer*in mit Trainer/in-Rolle diesen Link aufruft gelangt er/sie in den Bearbietungsmodus des Textfeldes.

https://drawkit.com

https://undraw.co

https://opendoodles.com

https://www.glazestock.com/

https://humaaans.com

https://icons8.com

https://weareskribbl.com/

MOOVE BW bietet hier Bilder, Grafiken für Kacheln/Grid etc. zum freien Download an.

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.

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

https://mathematikonline.at/

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.

----------

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

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.

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.

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>

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!

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)

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

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

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

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

Anleitung 1 von @bauschlagge

Anleitung 2 von @bauschlagge

Baukasten von @13Maryj

Anleitung

ANLEITUNG: ERSTELLUNG EINER RUBRIK IN DER AUFGABE BEI MOODLE

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

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

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

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://moodle.moove-bw.de/moodle/

https://moodlelab.moodleschule.de/

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

Link zur Website von Florian Dagner

Link zur Website von Florian Dagner

https://wakelet.com/wake/Efe8O1kTJwM38fC1xlPWD

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.

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

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

Unterschied siehe unten.

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

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

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>

Eintrag in Raw SCSS theme_boost | scss

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

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

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

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

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

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

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.
  

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

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

Link zur Website von Florain 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 Florian Dagner