In diesem Beitrag wird die Einbindung einer Lernlandkarte vorgestellt, die automatisiert den Fortschritt innerhalb eines Kurses bzw. ausgewählter Aktivitäten visualisiert.
💪 Automatisiert bedeutet, dass nach einmaliger Einbettung in den Folgewochen immer nur noch das Bild der Lernlandkarte geändert werden muss.
💪 Soll Woche für Woche das selbe Bild verwendet werden, wären demnach gar keine Änderungen mehr notwendig und die Lernlandkarte würde sich stets anpassen.
💪 Demnach funktioniert die Lernlandkarte unabhängig der vorgesehenen Inhalte – auch wenn z.B. nachträglich noch Aktivitäten hinzugefügt werden, der Kurs Differenzierungen beinhaltet usw.
💪 Bei der Entwicklung der Lernlandkarte wurde besonderer Wert darauf gelegt, dass die Einbindung keinen „Zusatzaufwand“ erfordert und dass keine Coding-Kenntnisse notwendig sind.
Wichtige Hinweise zu Updates:
Updates im Einbettungscode werden (mit Versionskennzeichnung) direkt in diesem Artikel vorgenommen (aktuell v.1.3) . Ebenso werden in diesem Artikel Vorlagen für Lernlandkarten nach und nach bereitgestellt und es sind Add-Ons in Planung, die wahlweise „angedockt“ werden können. Die neuesten Änderungen in diesem Artikel werden gelb markiert.
Es lohnt sich also, hin und wieder vorbeizuschauen!
Vorkehrungen
Für das Einbinden der Lernlandkarte sind die beiden Plug-Ins „mod_checklist“ und „block_checklist“ notwendig, die zum Plug-In-Set „Checklist“ gehören. Diese sind in vielen Moodle-Instanzen bereits installiert und werden als bewährt eingeschätzt.
Als Vorkehrung für den Einsatz der Lernlandkarte muss im Moodle-Kurs der Block „Fortschrittsliste“ angelegt sein. Das Skript der Lernlandkarte wird später automatisch auf die Werte dieses Blocks zugreifen.
Für den Block ist die gleichnamige Aktivität „Fortschrittsliste“ notwendig. Empfehlenswert kann es sein, diese Aktivität zu verbergen – die dann aber verfügbar gemacht werden muss.
Um den Block sowie die Aktivität „Fortschrittsliste“ zum Einsatz bringen zu können, muss die Abschlussverfolgung auf Admin-Ebene sowie in den Kurseinstellungen aktiviert sein.
Informationen zu den genannten Vorkehrungen:
Einbettung der Lernlandkarte
Nachdem die oben genannten Vorkehrungen getroffen wurden, sollte zunächst jeweils ein Bild für den Hintergrund der Lernlandkarte und eines für die Abdeckung vorbereitet werden. Es können hierfür die nebenstehenden Beispiele mit Rechtsklick gespeichert oder beliebige Bilder verwendet werden.
Nun wird ein Textfeld im Moodle-Kurs angelegt. Hierfür wird der Atto-Editor verwendet, der meist als Standard eingestellt ist.
In das Textfeld werden die beiden Bilder hochgeladen.
Diese sollten untereiander im Editor zu sehen sein – die Größe spielt keine Rolle.
Anschließend wird der Editor in den HTML<> – Modus umgeschalten (siehe Animation).
Es sollte nun ein Code sichtbar geworden sein. Darunter wird nun der nachfolgende Code für die Lernlandkarte eingefügt.
Nach dem Einfügen des Codes noch nicht speichern!
<!-- Learningmap v.1.3 - Copyright (C) 2021, TRMSC - https://trmsc1.wordpress.com/ -->
<!-- GNU General Public Licence 3.0 - http://www.gnu.de/documents/gpl-3.0.en.html -->
<!-- CODE FOR AN AUTOMATED LEARNINGMAP DEPENDING ON THE CHECKLIST-PROGRESS -->
<!-- J A V A S C R I P T - P A R T -->
<script>
window.onload = function() {
jquery_load_check_interval = setInterval(function() {
if (window.jQuery) {
learningmap();
console.log("jquery successfully loaded...");
console.log($.fn.jquery);
clearInterval(jquery_load_check_interval);
} else {
console.log("new try to load jquery...");
}
}, 150);
function learningmap() {
/* Get information from the checklist */
checklistFinish = parseFloat(
$(".checklist_progress_outer")
.css("width")
.replace("%", "")
.replace(",", ".")
);
checklistProgress = Math.ceil(
parseFloat(
$(".checklist_progress_inner")
.css("width")
.replace("%", "")
.replace(",", ".")
)
);
/* Use checklistRoundup to exclude a result of eg 99%; Change border-radius if progress > o */
var checklistRoundup = 0;
if (checklistProgress > 0) {
checklistRoundup = 0.5;
$("#mapCover").css({
"border-radius": "0px 15px 15px 0px"
});
}
/* Calculate the state */
checklistState = Math.ceil(checklistRoundup + checklistProgress / (checklistFinish / 100));
if (checklistState > 100) {
checklistState = 100;
}
/* Cover the map depending on the state */
$("#mapCover").css({
"margin-left": checklistState + "%"
});
$("#mapCover").css({
width: 100 - checklistState + "%"
});
/* Points */
let mapPointsValue = Math.round(checklistState);
$("#mapPoints").html(mapPointsValue);
/* Emblem */
switch (true) {
case mapPointsValue >= 0 && mapPointsValue < 33:
$("#mapEmblem").addClass("fa-compass");
break;
case mapPointsValue >= 33 && mapPointsValue < 66:
$("#mapEmblem").addClass("fa-flask");
break;
case mapPointsValue >= 66 && mapPointsValue < 100:
$("#mapEmblem").addClass("fa-magic");
break;
case mapPointsValue == 100:
$("#mapEmblem").addClass("fa-diamond");
break;
}
/* Stars */
switch (true) {
case mapPointsValue == 0:
$("#mapStars").html("0");
break;
case mapPointsValue > 0 && mapPointsValue < 25:
$("#mapStars").html("1");
break;
case mapPointsValue >= 25 && mapPointsValue < 50:
$("#mapStars").html("2");
break;
case mapPointsValue >= 50 && mapPointsValue < 75:
$("#mapStars").html("3");
break;
case mapPointsValue >= 75 && mapPointsValue < 100:
$("#mapStars").html("4");
break;
case mapPointsValue == 100:
$("#mapStars").html("5");
break;
}
/* Days */
var mapDateValue = new Date();
var mapTodayValue = mapDateValue.getDay();
if (mapTodayValue == 0) {
mapTodayValue = 7;
}
$("#mapToday").html(mapTodayValue);
if (mapTodayValue > 5) {
mapTodayValue = 5;
}
var mapLeftdaysValue = 5 - mapTodayValue;
if (mapLeftdaysValue == 1) {
$("#mapLeftdays").html(mapLeftdaysValue + " Tag");
} else {
$("#mapLeftdays").html(mapLeftdaysValue + " Tage");
}
/* Chart */
mapChartValue = mapPointsValue / mapTodayValue;
switch (true) {
case mapChartValue >= 20 && mapChartValue < 100:
$("#mapChart").html("Weiter so!");
break;
case mapChartValue < 20 && mapTodayValue < 5:
$("#mapChart").html("Halte dich ran!");
break;
case mapPointsValue < 100 && mapTodayValue == 5:
$("#mapChart").html("Letzte Chance!");
break;
case mapPointsValue >= 100:
$("#mapChart").html("Starke Leistung!");
break;
}
/* Loading animation */
$(".mapLoadingfield").css("filter", "opacity(1)");
mapLoading = setInterval(function() {
clearInterval(mapLoading);
$("#mapContent").css("cursor", "auto");
}, 2200);
}
};
</script>
<!-- H T M L - P A R T -->
<!-- Cursor and Heading -->
<br>
<div id="mapContent" style="cursor:wait;">
<h2 class="mapLoadingfield" style="text-align: center; transition: all cubic-bezier(0.41, 0.71, 0.57, 1) 2s; filter: opacity(0.9)">Deine Lernlandkarte in dieser Woche:</h2>
<!-- BACKGROUND OF THE MAP -->
<div id="mapBackground" style="
background-image: url(
GROßGESCHRIEBENES ERSETZEN: BILDADRESSE FÜR DEN HINTERGRUND OHNE ANFÜHRUNGSZEICHEN
);
background-size: cover;
background-position: right;
padding: 0px;
border: 3px solid #c5c1ae;
border-radius: 20px;
">
<!-- COVER OF THE MAP -->
<div id="mapCover" style="
background-image: linear-gradient(271deg, rgb(0 0 0 / 7%) 95%, rgb(255 243 220 / 31%) 100%, transparent 35%), url(
GROßGESCHRIEBENES ERSETZEN: BILDADRESSE FÜR DIE ABDECKUNG OHNE ANFÜHRUNGSZEICHEN
);
background-size: initial;
background-repeat: no-repeat;
width: 100%;
height: 350px;
margin-left: 0%;
border-radius: 15px;
overflow: hidden;
transition: all cubic-bezier(0.45, 0.71, 0.51, 1.22) 2s;
"></div>
</div>
<br>
<!-- Part under the map -->
<div class="row mapLoadingfield" style="margin: 0px!important; padding-left: 10px; padding-right: 10px; transition: all cubic-bezier(0.41, 0.71, 0.57, 1) 2s; filter: opacity(0.7)">
<div class="col-sm-1" style="align-self: center; text-align: left;">
<h3>
<i id="mapEmblem" class="fa" style="border: 2px #bbae8d; border-style: dashed; border-radius: 100%; padding: 8px; background-color: #f7ffba;"></i>
</h3>
</div>
<div class="col">
<h5 style="align-self: center; text-align: center">
<i class="fa fa-star" style="border: 2px solid #6c757d; padding: 10px; margin-top: 5px; margin-bottom: 5px; border-radius: 10px 0px; background-color: rgb(245 255 169 / 80%);"> <span id="mapStars"></span></i> |
<i class="fa fa-leaf" style="border: 2px solid #6c757d; padding: 10px; margin-top: 5px; margin-bottom: 5px; border-radius: 10px 0px; background-color: rgb(245 255 169 / 80%);"> <span id="mapPoints"></span>/100</i> |
<i class="fa fa-map-pin" style="border: 2px solid #6c757d; padding: 10px; margin-top: 5px; margin-bottom: 5px; border-radius: 10px 0px; background-color: rgb(245 255 169 / 80%);"> Tag <span id="mapToday"></span></i> |
<i class="fa fa-fire" style="border: 2px solid #6c757d; padding: 10px; margin-top: 5px; margin-bottom: 5px; border-radius: 10px 0px; background-color: rgb(245 255 169 / 80%);"> Noch <span id="mapLeftdays"></span></i> |
<i class="fa fa-line-chart" style="border: 2px solid #6c757d; padding: 10px; margin-top: 5px; margin-bottom: 5px; border-radius: 10px 0px; background-color: rgb(245 255 169 / 80%);"> <span id="mapChart"></span></i>
</h5>
</div>
<div class="col-sm-1" style="align-self: center; text-align: right;">
<h3>
<a href="" onclick="javascript: window.location.href"><i class="fa fa-refresh" data-toggle="tooltip" title="" data-original-title="Neu laden"></i></a><br>
</h3>
</div>
</div>
</div>
<!-- Vor dem Speichern sollte unter dieser Zeile <p><br></p> stehen. -->
<p><br></p>
Nun müssen noch die Bezüge zwischen Lernlandkarte und Bild hergestellt werden. Die Adressen der Bilder werden unten an die entsprechende Stelle kopiert:
Alles oberhalb des Kommentars <!– Lernlandkarte usw… –> muss nun gelöscht und anschließend gespeichert werden.
Nach dem Speichern sollte die Lernlandkarte bereits funktionieren – auch wenn es nicht danach aussieht. Im folgenden Abschnitt wird erläutert, wie Funktionalität und Darstellung überprüft werden können.
Funktionalität und Darstellung
Um zu überprüfen, wie die Lernlandkarte für Schüler*innen aussieht, muss neben der Trainer*innen-Einschreibung gleichzeitig auch eine Teilnehmer*innen-Einschreibung vorliegen. Nur so vergibt Moodle der/ dem Trainer*in einen eigenen Balken in der Fortschrittsliste – den die Lernlandkarte zur Überprüfung benötigt.
Das Skript der Lernlandkarte greift die Werte des Balkens auf. Dies funktioniert nur korrekt, wenn exakt ein Balken auf dem Bildschirm ist. Als Trainer*in werden immer alle Fortschritte des Kurses angezeigt. Um die Darstellung zu überprüfen, ist ein Wechsel in die Teilnehmer*innen-Rolle erforderlich.
Durch den Rollenwechsel kann in jedem Fall die Funktionalität und Darstellung der Lernlandkarte überprüft werden. Der Rollenwechsel ist jedoch nicht immer ganz korrekt, v.a. weil in diesem Fall auch verborgene Aktivitäten mit einberechnet werden (die „reine“ Teilnehmer*innen eigentlich nicht sehen). Für eine ganz korrekte Überprüfung wird daher ein Musterschüler*innenaccount empfohlen.
Noch ein Tipp zur Darstellung: Um die Höhe der Lernlandkarte zu ändern, kann bei <!– ABDECKUNG –> für height ein anderer Wert eingetragen werden.
Falls Funktionalität und Darstellung trotz dieser Schritte fehlerhaft sind, bitte eine Beschreibung per Twitter-DN 🕊, über das Kontaktformular ✉ oder als Kommentar 📣 in diesem Beitrag senden.
Bilder austauschen
Um Bilder auszutauschen, können neue Bilder in das selbe Textfeld geladen und die Bezüge entsprechend der Beschreibung oben hergestellt werden. Um die Orientierung zu behalten, sollte der Curser für das Hochladen eines Bildes an aller letzter Stelle im Editor platziert sein.
Nachdem die Bezüge der Bild-Adressen hergestellt wurden, sollte das Ende des Codes entsprechend des Hinweises gestaltet sein, sodass zum Schluss <p><br></p> steht.
Wird immer das selbe Textfeld verwendet, sollte von Zeit zu Zeit aufgeräumt werden, da die verwendeten Bilder im Hintergrund noch vorhanden sind. Hierfür muss im Editor auf das Symbol für verwendete Dateien geklickt werden.
Erläuterung der Elemente
Entsprechend des Kursfortschrittes sehen SuS ihr aktuelles Abzeichen.
| 0 – 33 % | Kompass |
| 33 – 66 % | halbvoller Trank |
| 66 – 99 % | Zauberstab |
| 100 % | Diamant |
Anhand des Kursfortschrittes werden Sterne vergeben. Dieses Feature wurde in Anlehnung an einen SuS-Wunsch umgesetzt.
| 0 % | 0 Sterne |
| 1 – 25 % | 1 Stern |
| 25 – 50 % | 2 Sterne |
| 50 – 75 % | 3 Sterne |
| 75 – 99 % | 4 Sterne |
| 100 % | 5 Sterne |
Die gesammelten Blätter entsprechen den Prozenten der Fortschrittsliste.
Die Zählung der Tage beginnt mit Montag und läuft auch am Wochenende bis zu Tag 7 weiter.
In diesem Feld werden die verfügbaren Tage bis Freitag angezeigt. Am Wochenende bleibt die Angabe mit „Noch 0 Tage“ bestehen.
Dieses Feld setzt den Fortschritt mit dem aktuellen Wochentag in Verbindung und zeigt hierdurch eine Tendenz des Vorankommens.
| „Weiter so!“ | Fortschritt und Wochentage stehen in einem angemessenen Verhältnis |
| „Halte dich ran!“ | Fortschritt ist im Verhältnis zum Wochentag nicht ideal |
| „Letzte Chance!“ | Aktivitäten sind am Wochenende noch nicht abgeschlossen |
| „Starke Leistung!“ | Aktivitäten sind abgeschlossen |
Mithilfe dieses Buttons kann die Seite aktualisiert werden. Je nach dem welche Form der Aktivität bearbeitet wurde, kann ein Reload notwendig sein, um die Lernlandkarte auf den neuesten Stand zu bringen.
Vorlagen für Lernlandkarten
Die folgenden Vorlagen wurden mit Inkarnate erstellt, werden nach und nach erweitert und dürfen verwendet werden. Im Einsatz mit der Lernlandkarte muss im Moodle-Kurs keine Angabe für die Teilnehmer*innen gemacht werden. Bei anderweitiger Verwendung stehen die Bilder unter der CC-BY-SA-4.0-Lizenz mit Copyright (C) 2021, TRMSC https://trmsc1.wordpress.com/.
Die Bilder können mit Rechtsklick auf den Button – „Ziel speichern unter“ heruntergeladen werden.
Lizenziert unter einer Creative Commons Namensnennung – Weitergabe unter gleichen Bedingungen 4.0 Lizenz. Copyright (C) 2021, TRMSC https://trmsc1.wordpress.com/.
TRMSC 
