You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
MrDoubleH 58a8515dab upload CalBlock, init 5 days ago
moodleCalendarBlock upload CalBlock, init 5 days ago
moodleCursorChanger init in v5 2 weeks ago
moodleDatenbankEMTippspiel moved screenshots-dir, calendarBlock 5 days ago
moodleDatenbankSportWeltUmrunden moved screenshots-dir, calendarBlock 5 days ago
moodleGradeGrapher moved screenshots-dir, calendarBlock 5 days ago
moodleMultiAvatarify moved screenshots-dir, calendarBlock 5 days ago
moodleSalut moved screenshots-dir, calendarBlock 5 days ago
.gitignore init in v5 2 weeks ago
LICENSE readme, license 2 weeks ago
README.md moved screenshots-dir, calendarBlock 5 days ago

README.md

moodleScripte

version license maintained

twitter PayPal

Inhalt

Hier finden sich JavaScripte, CSS-Vorlagen und ein paar Ideen im Bezug auf Moodle (ggf. Mebis). Manchmal werden Funktionen ergänzt, manchmal wird das Design etwas "intuitiver" gestaltet. In den Unterordnern sind die jeweiligen Scripte genauer beschrieben. Dort finden sich Greasemonkey-Scripte (JavaScript, s. Hinweise) und/oder Codeblöcke direkt für Moodle, die in ein Textfeld über die HTML-Ansicht eingefügt werden wollen. Die dort bereitgestellten README-Dateien erklären ggf. zusätzliche Einstellungen. Alle Scripte und Erweiterungen sind unter der CC 4.0 BY-NC-Lizenz verfügbar.

  • moodleCalendarBlock: Änderungen am Monatskalender-Block wie z.B. aktuellen Tag hervorheben; erarbeitet von @MrDoubleH; CSS-Hinweise von @TRMSC1

  • moodleCursorChanger: Cursor wird zu einem (fast) frei wählbaren Text oder Emoji geändert; erarbeitet von @MrDoubleH

  • moodleGradeGrapher: Nachdem Bewertungen von Abgaben gemacht wurden, wird ein Graph generiert, der den zeitlichen Verlauf der Bewertungen auf der Benutzerseite wiedergibt bzw. es werden Histogramme für Abgabenbewertungen sowie Kursbewertung erstellt. Erstellt für das default-classic-Theme (s. Versionshinweise); erarbeitet von @MrDoubleH

  • moodleMultiAvatarify: das graue Standard-Profilbild der Benutzer wird (einfach für mehr Farbe) mit einem zufällig generierten, bunten Avatarbild ersetzt; erarbeitet von @MrDoubleH

  • moodleSalut: uhrzeit-abhängige oder zufällige, aber stets persönliche Begrüßung im Moodle-Kurs; erarbeitet von @MrDoubleH; erste Ideen von #twlz

  • MoodleDatenbank-Vorlagensätze:

Hinweise

  • Meist sind die Scripte und CSS-Dateien auf Moodle direkt getestet als auch mit dem GreaseMonkey- bzw. TamperMonkey-Addon (Mozilla Firefox GM, Mozilla Firefox TM, Google Chrome TM). Natürlich können sich auch Fehler einschleichen, sich Moodle-Versionen unterscheiden, Themes ändern etc.
  • bitte keine Support-Anfragen ohne vorheriges Suchmaschine-Anwerfen 🙂
  • ich lerne git erst gerade kennen...

Versionshinweise

Scripte gestestet für Mozilla Firefox und Google Chrome unter:

  • Moodle 3.11 (Build: 20210517)
  • Moodle Default Classic Theme

Hier sollen -unvollständig- Sammlungen, Tools, Scripte, Ideen und mehr mit direkt(er)en Bezug zu moodle aufgelistet werden.

  • 3rdwavemedia.com: Bootstramp in Moodle-Kursen, direkt zum Kopieren
  • bitsandbobs: @profekohl: Code-Stücke zum Kopieren, Bootstrap etc.
  • Box-Shadow-Css-Generator: generiert CSS-Code für Schatten als Hintergrund; Code-Stücke zum Kopieren
  • getbootstrap.com: Button-, Dropdown-, CSS-Vorlagen etc.. Ein Blick lohnt sicher: alterts, buttons, card, carousel (slider), collapse, dropdown, popover, progress, tooltip...
  • Moodle-Hacks: Graphische Elemente: Das Schulportal Hessen zeigt optische Änderungen über font-awsome, bootstrap etc. z.B. Buttons, Icons für Listen, Details-Tag, sortierbare HTML-Tabelle und mehr; Code direkt zum Kopieren.
  • TRMSC: von Text2Speech in Moodle bis CSS-Vorlagen; Code-Schnipsel direkt zum Kopieren
  • Quizdidaktik.de: Unzählige Tools und Generatoren für Javascript. Nicht nur speziell für Moodle/Mebis aber eben auch. Es gibt z.B. Icon-Generatoren (über font-awsome etc.), Hintergrundgestalter (mit/ohne Musik), Details-Tag bzw. w3schools.com, Emoji-Generator für von Moodle nicht-abspeicherbare Emojis, math. Formel-Editor ohne LaTeX-Kenntnisse, Formel-Editoren für Chemie, eigener Abschnitt für Informatik, Icon-Generator für Bildungsinhalte etc.
  • @FreakyClaudi: PDF, Claudia Schwemmers, bebilderte Anleitung zu Editoren und viele CSS-Styles; teilweise zum direkt Kopieren; eBook: Tipps und Tricks für schönere Moodle-Kurse
  • @MatthiasRke: unterschiedliche Datenbank-Vorlagen finden sich u.a. über den Twitter-Account

Codeideen

Folgende Code-Stücke sind in das Textfeld auf Moodle in der HTML-Ansicht einzufügen und von getbootstrap.com mit wenig Änderungen übernommen. Unter bestimmten Bedingungen kann Moodle das auch selbstständig.

  • Das Wort updates mit Hintergrundfarbe und einer rot hinterlegten 4 als Badge; z.B. für News, Updates etc. Die Anzahl könnten natürlich auch über JavaScript gesetzt werden, wenn die Anzahl von Elementen ausgelsen werden kann. Wäre auch mit dem Datum möglich oder als Countdown denkbar...
    <button type="button" class="btn btn-primary">
      updates <span class="badge badge-light" style="background: red; color: white">4</span>
    </button>
    
  • eine Art Button mit Dropdown-Menü (ginge auch mit einer buttongroup und z.B. mehreren Aufgaben nebeneinander):
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Aufgabe 1</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Erarbeiten</a>
        <a class="dropdown-item" href="#">Austauschen</a>
        <a class="dropdown-item" href="#">Feedback</a>
        <a class="dropdown-item" href="#">Abgeben</a>
      </div>
    </div>
    
  • zwei Karten nebeneinander mit Bild, kleiner Text, Button und Footer (auf gleicher Höhe); zudem wird das sogenannte card-deck mit einem kleinen rechten Rand versehen, damit keine Scroll-Leiste links-rechts angezeigt wird. Wichtig: Bilder sollten diesselbe Maße haben.
    <div class="card-deck" style="margin: 0px 5px 0px 0px">
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/NewCastleStuttgartWinter.jpg/256px-NewCastleStuttgartWinter.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Kartentitel</h5>
                <p class="card-text">Hier kan nein längerer Te<span id="selectionBoundary_1621858404592_4744108798450737" style="line-height: 0; display: none;" class="rangySelectionBoundary"></span>xt als nebenan stehen und die footer werden weiterhin auf dieselebe Höhe gesetzt. Das kann man wollen, oder eben auch nicht. Links sind natürlich auch möglich: <a href="https://commons.wikimedia.org/wiki/Neues_Schloss,_Stuttgart" target="_blank">Neues Schloss, Stuttgart</a>.<br></p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Public domain</small>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/AltesSchlossStuttgart.JPG/256px-AltesSchlossStuttgart.JPG" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Kartentitel</h5>
                <p class="card-text">Ein etwas kürzerer Text; gefolgt von einem Button<br></p>
                <a href="https://commons.wikimedia.org/wiki/Neues_Schloss,_Stuttgart" target="_blank" class="btn btn-primary">Zum Neuen Schloss (STR)</a>
            </div>
            <div class="card-footer">
                <small class="text-muted">Public domain</small>
            </div>
        </div>
    </div>
    
  • Eine Liste mit Badges und Nummern; maximale Breite wurde ergänzt, sonst wird auf Moodle die gesamte Breite benutzt:
    <ul class="list-group" style="max-width: 300px">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Projektdateien
            <span class="badge badge-danger badge-pill">10</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Präsentationen
            <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Feedbackeinheiten
            <span class="badge badge-primary badge-pill">1</span>
        </li>
    </ul>
    
  • Fortschritt in Form von Text
    <ul class="list-group" style="width: 300px;">
        <li class="list-group-item" style="color: #AAA">Ideen sammeln</li>
        <li class="list-group-item" style="color: #AAA">Sortieren</li>
        <li class="list-group-item" style="color: #AAA">1. Abgebe</li>
        <li class="list-group-item active">erstes Feedback</li>
        <li class="list-group-item">Feedback einarbeiten</li>
        <li class="list-group-item">finale Abgabe</li>
    </ul>
    
  • Button mit einer Art alert-Funktion; nach einem Klick auf den Button, wird ein PopUp angezeigt (nennt sich Modal):
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">Klick Mich</button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Hier steht der Titel</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    Hier kommt der anzuzeigende Text hin. Das ist sozusagen der Body des modals. Um diesen Text zu bearbeiten, muss in der HTML-Ansicht gearbeitet werden. Natürlich sind auch <a href="https://codeberg.org/" target="_blank" >Links</a> möglich... warum auch immer das nötig sein sollte. :)
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>