Tipps & Tricks der #moodlebande

Sie können das Glossar über das Suchfeld oder das Stichwortalphabet durchsuchen.

@ | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | Alle

K

Kachelformat: Abschnitte nummerieren

von Thomas Unkelbach - Samstag, 11. Februar 2023, 22:45

Link zur Website von Florian Dagner

Kachelformat: Aktuellen Abschnitt kennzeichnen

von Thomas Unkelbach - Samstag, 11. Februar 2023, 22:43

Link zur Website von Florian Dagner

Kachelformat: Farbenfrohes Kachelformat

von Thomas Unkelbach - Freitag, 30. September 2022, 10:55

Link zur Website von Florian Dagner

Kachelformat: Kacheln formatieren

von Thomas Unkelbach - Samstag, 11. Februar 2023, 22:48

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

Kontle

von Thomas Unkelbach - Samstag, 3. September 2022, 16:22

Link zur Website von Florian Dagner

Kurs: Hilfebutton als Overlay

von Thomas Unkelbach - Dienstag, 31. Januar 2023, 16:12

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:

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

Kurs: Hintergrundfarben von Abschnitten ändern

von Thomas Unkelbach - Sonntag, 19. März 2023, 17:25

Mit diesem Codeschnipsel (Danke an Marius Gomes) lassen sich die Hintergrundfarben verschiedener Abschnitte eines Kurses unterschiedlich einfärben.

/* Diesen HTML/CSS-Code in ein Textfeld oben im Kurs kopieren (HTML-Editor vorher ausschalten) zwischen ein - Tag */

/* Mehr Platz über den Abschnitts-Titeln */
.section { padding-top: 1rem; }

/* Bei kleinen Bildschirmen: mehr Platz zum linken Rand für die Abschnitts-Titel */
@media only screen and (max-width: 768px) { .content { margin-left: 1rem!important; } }

/* Hintergrundfarben der Abschnitte */
#section-1 { background-color: #fde5d4; }
#section-2 { background-color: #e9e8ee; }
#section-3 { background-color: #e5f0ee; }
#section-4 { background-color: #f2f5cc; }

Kurs: Schrift ändern

von Thomas Unkelbach - Sonntag, 29. Oktober 2023, 16:43

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.

Kurse: Bild als Header

von Thomas Unkelbach - Freitag, 21. Oktober 2022, 15:20

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

Kurse: Individuelle Begrüßung oder Anrede

von Thomas Unkelbach - Freitag, 21. Oktober 2022, 15:24

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:

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!

Kursformat: Methodenorientierung

von Thomas Unkelbach - Freitag, 8. September 2023, 18:07

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

Erklärvideo, wie eine methodenorientierte Kursdarstellung aussehen könnte.

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>