Idee
Ich gestalte eine Website, auf der sich häufig verwendete Methoden aus dem agilen Lernen und dem Design Thinking Kontext als ‚Folien‘ zum Präsentieren finden.
Kontext
Es gibt Methoden, die immer wieder und in unterschiedlichsten Kontexten aufgegriffen werden können, z.B. die 4L Methode (Liked, Learned, Lacked, Longed for) oder Start-Stop-Continue zur Retrospektive. Eine Website, auf der diese Folien leicht findbar und direkt präsentierbar sind, könnte eine gute Arbeitserleichterung sein.
Ganz konkret stelle ich es mir so vor, dass auf der Startseite ausgewählt werden kann (vielleicht über eine mit dem H5P-Inhaltstyp Information Wall gestaltete Auswahl) und dann auf Klick die ausgewählte Methode präsentiert werden kann. Vielleicht könnte man noch das Gimmick ergänzen, dass ein Timer dazu gestartet werden kann.
Reflexion zur Entwicklung der Idee
Ich frische gerade meine Methoden-Kenntnisse auf und lese einige Bücher zu Kreativitätsmethoden und agiler Workshopgestaltung. Da ich immer wieder auch auf bekannte Methoden stieß, kam mir diese Idee.
Notiz an mich: Hier ist der benötigte Code für den Countdown-Timer – scheint jetzt funktionsfähig nach einem sehr langwierigen Gespräch mit ChatGPT ;-)
<html>
<head>
<title>Countdown Timer</title>
<script>
var timerId = null;
document.addEventListener("keypress", function(event) {
var key = event.which || event.keyCode;
if (key >= 49 && key <= 57) {
startTimer(key - 48);
}
});
function startTimer(minutes) {
var countdown = document.getElementById("countdown");
countdown.style.display = "block";
var timer = minutes * 60;
clearInterval(timerId);
timerId = setInterval(function() {
var minutes = Math.floor(timer / 60);
var seconds = timer % 60;
countdown.innerHTML = minutes + ":" + seconds;
if (--timer < 0) {
countdown.style.display = "none";
var audio = new Audio("gong.mp3");
audio.play();
clearInterval(timerId);
}
}, 1000);
}
</script>
</head>
<body>
<div id="countdown" style="display: none; font-size: 72px; width: 200px; height: 200px; line-height: 200px; border-radius: 100px; text-align: center; background-color: #ddd; color: #333; position: absolute; top: 10px; right: 10px;">0:00</div>
</body>
</html>
Beitrag merken & teilen
Hier kannst Du dir den Link zum Beitrag kopieren - beispielsweise um ihn für Dich zu speichern oder mit anderen zu teilen. Wenn Du den Link in den Suchschlitz im Fediverse einfügst, kannst Du den Beitrag von dort aus kommentieren. Die Kommentare erscheinen dann nach Freigabe hier auf der Website.
Beitrag weiternutzen
Der Beitrag steht unter der Lizenz CC BY 4.0. Du kannst ihn gerne unter Angabe des Lizenzhinweises offen weiternutzen.
