Ideenfindung
Viele Ideen schwirrten im Kopf herum, von welchen auch ein paar angefangen wurden. Doch keines dieser angefangenen Projekte war zufriedenstellend, deshalb wurde alles wieder über den Haufen geworfen.
Aus Liebe zu Buzzfeed-Quiz, Sporcle-Quiz und Quiz im Allgemeinen wurde dann entschieden, eine eigene Quiz-Plattform zu erstellen. Es war schnell klar, dass es um Geografie gehen soll.
Umsetzung
Als erstes wurde die Website mit Hilfe von Bootstrap aufgebaut. Es wurde hohe Priorität auf das Design gelegt, weshalb sehr viel Zeit investiert wurde, für die Suche nach passenden Farbverläufen und Animationen. Nicht alle konnten verwendet werden, da sonst die Seite zu «wild» und überladen gewesen wäre, doch diverse Animationen wurden eingebaut. Beim Header-Background wurde eine CSS-Animation angewendet, damit sich der Hintergrund mittels eines Farbverlaufes bewegt. Auf die Titel wurde ebenfalls eine CSS-Animation angewendet, damit sie einen 3D-Effekt haben. Zusätzlich wurde ein Scroll-Hinweis eingefügt, der die User darauf hinweist, dass nach unten gescrollt werden soll. Mit JavaScript wurde zudem das Scrollen smoother gemacht. Zum Beispiel, wenn man auf den Button klickt, springt die Seite nicht mehr nach unten, sondern scrollt smooth nach unten.
Ursprünglich war geplant, dass es ein Karten-Quiz wird, bei welchem für die Antwort direkt auf eine gewisse Region geklickt werden kann. Doch auch nach intensiver Recherche wurde nicht herausgefunden, wie man eine HTML-Map in ein JavaScript-Quiz einfügen kann. Es wurde dann entschieden, ein JavaScript-Quiz zu erstellen mit Hilfe eines Templates. Doch auch dies scheiterte wegen mangelnder Kenntnisse. Das Template konnte nicht überall wie gewünscht abgeändert werden und es schlichen sich vermehrt Fehler ein, was es unmöglich machte, die Quiz einheitlich zu gestalten. Es wurde erneut recherchiert und da kam die Lösung: Playbuzz. Mit Hilfe von Playbuzz konnten die Quiz einheitlich und fehlerfrei erstellt werden.
Für die verschiedenen Themen wurde jeweils ein Farbkonzept erstellt, das sich im Header und den Quiz widerspiegelt. Die Bilder für die Quiz wurden alle in Illustrator erstellt. Es stellte sich jedoch als Problem heraus, die Bilder ohne Qualitätsverlust auf Playbuzz zu laden. Lange wurde versucht, das Problem zu beheben, indem die Bilder mit verschiedenen Auflösungen hochgeladen wurden, doch leider konnte der Qualitätsverlust nicht verhindert werden.
Fragen für die Quiz zu erstellen stellte sich schwieriger heraus als erwartet. Da jede*r einen anderen Wissensstand hat, sind die Fragen für die einen schwer und für die anderen einfach. So musste ein guter Mittelweg gefunden werden. Zudem gibt es sehr viele Möglichkeiten für Fragen, da war es schwierig, dass die Quiz nicht ausufern. Denn aus Erfahrung kann man sagen, dass User oft schnell gelangweilt werden, wenn es zu viele Fragen sind. Auch die Recherche der Antworten brachte kleine Hürden mit sich. Zum Beispiel waren nicht auf allen Seiten die gleichen Zahlen abgebildet oder Teils waren unterschiedliche Städte die Grössten, je nachdem, wie man das geografische Gebiet betrachtete. So war auf einer Seite Istanbul die bevölkerungsreichste Stadt und auf einer anderen Moskau. Da mussten viele Seiten verglichen werden und anschliessend musste ein Urteil gefällt werden.
Fazit / Learnings
Alles in allem war das Projekt sehr lehrreich. Eines der Learnings war, dass mit CSS viele Animationen erstellt werden können und nicht nur mit JavaScript. Zudem wurde immer bewusster, dass es viel aufwändiger ist, wenn man ein Einzelprojekt macht und auf sich alleine gestellt ist.
