In this class we covered basic programming elements such as variables, loops, conditions and classic algorithms. As well we covered complexity, prioritization and framing which is especially important in a creative and innovative context. To give first semester students space to learn the basic elements of coding, UI-Design is not the focus of this class, however students can customize the UI-Design as a bonus feature.
Aufgabe war es, ein funktionierendes Quiz Game mithilfe von JavaScript, HTML und CSS zu bauen. Es sollte 5 Fragen in zufälliger Reihenfolge, mit jeweils 3 Antwortmöglichkeiten enthalten. Des Weiteren sollte ein Score Zähler implementiert werden. Sobald das Quiz durchgespielt ist, soll es auch ein Home/ Neustart Button geben.
Themenwahl
Ich wollte mit meinem Quiz einen Mehrwert für andere Studenten schaffen. Daher entschied ich mich dafür, ein Coding Quiz zu programmieren, welches die Inhalte der Vorlesung nochmal wiederholte. So hatte ich dann 3 verschiedenen Quiz Möglichkeiten für JavaScript, HTML und CSS.
Prozess
Zu Beginn war es mir wichtig, erstmal zu verstehen, wie man so ein Quiz von der Struktur her aufbauen kann und Inspirationen zu sammeln. Dafür schaute ich ein paar YouTube Videos an und las viel auf Stackoverflow und Github. Da diese Lösungen aber alle recht komplex erschienen und auch das vorgegebene Framework der Dozentin nicht wirklich für meine Ideen geeignet war, entschied ich mich dafür, alles komplett selbst zu programmieren.
Challenges
Mein Ziel für den Code war es, ihn so clean und kompakt wie möglich zu halten. So begann ich erstmal, die Grundideen umzusetzen und vereinfachte diese später dann immer weiter. Daraufhin begann ich zu überlegen, was man zusammenführen kann und welche Funktionen eventuell andere ersetzen könnten.
Gestaltung
Bei der Gestaltung orientierte ich mich an alten Spielhallen aus den 80 Jahren und wollte eine Atmosphäre schaffen, welche zum Programmieren passt. Auch bei der Schriftart entschied ich mich für eine Monospace Schrift, die Roboto Mono, welches gut zum Thema Programmieren passt.
Zusätzliche Inhalte meines Quiz
Ich wollte zusätzlich zu den Mindestanforderungen noch ein paar Dinge hinzufügen. So ist bei meinem Quiz nicht nur jede Frage in einer zufälligen Reihenfolge, sondern auch die 3 Antwortmöglichkeiten von der Anordnung. So kann man sich nicht die Position der korrekten Antwort merken. Die Antworten sind direkt auf den jeweiligen Buttons. Es gibt eine Startseite mit 3 Quiz Auswahlmöglichkeiten. Der Fragenkatalog ist erweiterbar und beinhaltet derzeit 21 Fragen. Und wenn man alle 5 Fragen richtig beantwortet hat, wird “Highscore!” angezeigt und es erscheint eine Konfetti Animation.
Um die Quiz Games unseres Studiengangs spielbar zu machen, haben Florian Kiem und ich noch eine kleine Übersichtsseite programmiert. Dafür einfach den Button rechts nutzen.
Abschließend noch ein kurzes Video, wo ein Teil des Quiz einmal durchgespielt wird.
Hinterlasse einen Kommentar