Tipps & Tricks der #moodlebande

Link zur Website von Florian Dagner

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

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');

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

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:

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

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:

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:

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>

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.

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>

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)

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)

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>

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.

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

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

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

.headerbkg {
display: none;
}

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

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

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

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

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

Link zum Dashboard aus der Navigationsleiste entfernen

Link zur Startseite aus der Navigationsleiste entfernen