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 weiternutzen und teilen
Dieser Beitrag steht unter der Lizenz CC BY 4.0 und kann somit gerne offen weitergenutzt und geteilt werden. Hier kannst du dir den Beitragslink und/oder den Lizenzhinweis kopieren. Wenn du den Beitragslink in das Suchfeld im Fediverse (z.B. bei Mastodon) eingibst, wird er dir dort angezeigt und du kannst ihn kommentieren.
