Tipps & Tricks der #moodlebande

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: