JavaScript w Moodle – Jak Rozszerzyć Możliwości LMS?

Moodle to jedna z najpopularniejszych platform e-learningowych na świecie. Ale czy wiesz, że możesz wzbogacić jej funkcjonalność, korzystając z JavaScript? Dzięki temu językowi możesz dodawać interaktywne elementy, poprawiać UX i personalizować kursy. W tym artykule omówimy zastosowanie javascript moodle, przedstawimy javascript moodle przykłady oraz pokażemy, jak wdrożyć własne skrypty.

Dlaczego warto używać JavaScript w Moodle?

Moodle jest bardzo elastycznym systemem, ale czasem może brakować pewnych funkcjonalności. JavaScript pozwala:

• Dodawać interaktywne quizy i animacje
• Automatycznie modyfikować zawartość kursów
• Integrację z innymi narzędziami
• Poprawiać wygodę użytkownika (np. dynamiczne formularze)

Gdzie można dodać kod JavaScript w Moodle?

Istnieje kilka sposobów dodawania kodu JavaScript do Moodle:

• Wstawianie kodu w treści kursu – Możesz używać znaczników <script> w treści kursu
• Dodawanie kodu do plików motywu – Jeśli masz dostęp do plików, możesz edytować pliki motywu
• Tworzenie niestandardowych wtyczek – Moodle pozwala na rozwijanie własnych rozszerzeń
• Użycie sekcji Dodatkowego kodu JS – W ustawieniach administracyjnych

JavaScript Moodle – przykłady

Zacznijmy od prostego przykładu dodania skryptu JavaScript do strony kursu. Wystarczy dodać następujący kod w edytorze HTML:

<script>
document.addEventListener("DOMContentLoaded", function() {
    alert("Witamy na kursie Moodle!");
});
</script>

Po wejściu na stronę kursu użytkownik zobaczy okno dialogowe z powitaniem.

Dodawanie interaktywnych przycisków

Możesz dodać przycisk, który po kliknięciu wyświetli dodatkową informację:

<button id="showInfo">Kliknij, aby zobaczyć info</button>
<p id="extraInfo" style="display:none;">Tutaj jest ukryta informacja!</p>

<script>
document.getElementById("showInfo").addEventListener("click", function() {
    document.getElementById("extraInfo").style.display = "block";
});
</script>

Po kliknięciu w przycisk zostanie pokazany ukryty tekst.

Personalizacja treści dla zalogowanych użytkowników

Możemy także dynamicznie dostosowywać treść w zależności od tego, kto jest zalogowany:

<script>
if (M.cfg.wwwroot.includes("moodle")) {
    document.body.innerHTML += "<p>Witaj w swoim kursie!</p>";
}
</script>

Ten kod sprawdza, czy użytkownik jest na stronie Moodle i dodaje powitalną wiadomość.

Obsługa AJAX w Moodle

Jeśli chcesz pobierać dane bez przeładowania strony, możesz użyć AJAX-a. Poniżej przykład pobierania danych z API Moodle:

<script>
fetch("/webservice/rest/server.php?wstoken=YOURTOKEN&wsfunction=core_webservice_get_site_info&moodlewsrestformat=json")
.then(response => response.json())
.then(data => console.log(data));
</script>

Ten kod pobiera informacje o stronie Moodle za pomocą API.

Podsumowanie

JavaScript w Moodle otwiera ogromne możliwości personalizacji i usprawnienia działania platformy. W artykule przedstawiliśmy javascript moodle przykłady, które możesz wykorzystać od razu. Zachęcamy do eksperymentowania i dostosowywania Moodle do swoich potrzeb!