Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
Klausuren Countdown
Autor: Matthias Olbrisch
Die Idee
Die Idee der Webapplikation ist es dem Studenten eine App zu liefern, die ihm die Möglichkeit bietet, den Lernfortschritt bzw. den Lernstand bis zu einem Klausurtermin zu überwachen. Der Fokus lag hierbei nicht auf einem besonders aufwendigen Design, sondern auf der Funktionalität der Web Applikation.
Wie funktioniert das Ganze ?
Die einzige Eingabe, die ein Student dazu zu tätigen hat, ist die der Eingabe des Klausurensdatums in das dafür vorgesehene Feld unter der Frage „Wann ist deine Klausur?“ und die Bestätigung über den „Bestätigen“ Button.
Danach generiert sich unter der Aussage „Wie viel Zeit du noch hast!“ ein Countdown, der die verbleibenden Tage bis zur Klausur berechnet und live herunterzählt.
Der Code für den Countdown behandelt zwei Problemstellungen. In der Funktion time_remaining(startTime) wird die im Eingabefeld vom Nutzer eingegebene Zeit in Millisekunden von der Startzeit abgezogen, daher wird im anschließenden Verlauf von Millisekunden auf Sekunden, Minuten, Stunden usw. gerechnet. Schließlich gibt der Operator „math.floor“ den größten Integer zurück, der bei der Berechnung der Sekunden, Minuten usw. entsteht.
Die Funktion SubmitDate update nun die Countdown Daten mittels z. B. days_span.innerhtml=t.days; die Countdown – Werte. Schließlich würde der definierte Countdown nach dessen logischem Ende noch in den Minus Bereich laufen. Dies wird mittels der bedingten Funktion verhindert.
Bei mehr als 7 Tagen wird der Status „Alles Okay“ ausgegeben, bei weniger als 7 Tagen wird vermeldet, dass man „Nur noch eine Woche“ zur Vorbereitung hat. Unter oder bei 4 Tagen Restlaufzeit wird „Jetzt aber!!“ ausgeliefert und am letzten Tag wird angekündigt, dass man „Morgen“ die Klausur schreibt. Am Prüfungstag wird „Viel Glück und Erfolg“ gewünscht.
Der entsprechende Code verdeutlicht, dass sofern 8 Tage oder mehr Vorbereitungszeit bleiben, „Alles okay“ ist. Dazu wird am Beginn die restliche Tageszahl über console.log(days) ausgelesen. Die unterschiedlichen Status werden über if – else Bedingungen formuliert.
Zusätzlich zu diesen Statusmeldungen, wird ein Kreis gezeigt, der anhand des vorhandenen Puffers den Fortschritt des Lernens veranschaulicht darstellen soll. Dazu wächst er in den letzten 7 Tagen der Klausurvorbereitung um je 100/7 % pro Tag. Bis er schließlich voll ist. Dauert es noch länger als 7 Tage, wird der Kreis nicht angezeigt.
Das Ergebnis:
Umsetzung
Die Applikation wurde mithilfe von Elementen aus HTML 5, CSS 3, Javascript sowie jQuery entwickelt. Unterstützung habe ich bei den Plattformen „codepen.io” und „W3schools“ gefunden.
Dateienliste: hier
Zum besseren Verständnis ist der Code mit ausführlichen Kommentaren versehen.