Oktober 2022
Letztes Jahr hatten wir eine TYPO3-Schulung für das Forschungszentrum abgehalten und sind dem DKFZ sehr professionell und positiv in Erinnerung geblieben. In Folge dessen bekamen wir eine weitere Anfrage für die Umsetzung eines webbasierten Quiz zum Thema „Alkohol und Krebs“. Da damit ein Projekt mit technischer Expertise gepaart mit designerischer Kreativität darstellt, war unser Interesse mehr als geweckt.
Im Rahmen der Nationalen Krebspräventionswoche im September 2022 sollte ein browserbasiertes Quiz zum Thema „Alkohol und seine Auswirkungen“ erstellt werden. Das Motto ist: „#ZEROHERO - Ohne Alkohol sinkt dein Krebsrisiko“. Das Quiz sollte auf digitalen Infoständen auf der Krebspräventionswoche offline laufen und parallel auch als Online-Version auf der DKFZ-Website zur Verfügung gestellt werden. Für die Offline-Version war seitens der Forschungsinstitution ein eKiosk-System auf Messe-Terminals geplant. Dafür wurde der Kiosk-Modus von Google Chrome verwendet, der nur einen beschränkten Browser-Zugriff bietet.
Unter Beachtung der CI und der Design-Vorgaben des Kunden sollte das Quiz für eine gemischte Zielgruppe in einem erfrischenden Design im Comic Look mit kleineren Animationen gestaltet werden. Themenbezogene Fragen zu „Auswirkungen von Alkohol“ sollten wir in ansprechenden und auch kreativen Fragestellungen verpacken. Aus technischer Sicht sollte das System, auf dem das Quiz basiert, erweiterbar und wartbar sein. Die Templates sollten responsive und vor allem wiederverwendbar realisiert werden.
Nach dem ersten Kick-off und dem darauffolgenden Erhalt aller Daten erstellte unsere Kreativabteilung das Design für die Desktop-Versionen im Chrome Kiosk-Offline- und Online-Modus sowie die responsive Ansicht für Smartphones. Darunter fielen der Welcome-Screen mit Quiz-Start-Button sowie die Templates für themenbezogene Fragen und deren Antwortmöglichkeiten und auch die Teilergebnis- sowie Gesamtergebnis-Anzeige. Alle Templates haben wir mit eigens von uns gestalten Animationen, die das Look & Feel auflockern, versehen.
Dann kamen unsere Entwickler zum Zuge und kümmerten sich um die responsive Umsetzung. Für die Online-Version wurde mit NuxtJS (v. 3), ein Framework, das auf Vue3 basiert, eingesetzt. NuxtJS bietet neben der Funktion des serverseitigen Renderns (SSR) auch die Möglichkeit, Applikationen statisch zu rendern (SSG). Dies hat neben gesteigerter Performance und besserer Strukturierung innerhalb des Projektes den Vorteil, weniger Anforderungen an den Server zu stellen.
Neben der Design-Umsetzung musste zudem die Ablauflogik nach Vorgaben des Kunden implementiert werden. Hierbei war eine Straight-Forward-Lösung vorgesehen, die keine Rückwärtsnavigation bei der Beantwortung der Fragen zulässt. Die Ergebnisse der einzelnen Antworten sollten anonym über einen flüchtigen Speicher erfasst, am Ende des Quiz ausgegeben und danach wieder gelöscht werden. Auch bei einem Abbruch des Quiz sollte der Zwischenspeicher zurückgesetzt werden.
Die Fragen und Antworten haben wir auf Basis einer JSON-Datei aufgebaut und so vorbereitet, dass beides jederzeit einfach und schnell ausgetauscht oder aktualisiert werden kann. Hierfür sind keine Programmierkenntnisse nötig, wodurch der Auftraggeber in der Lage ist jederzeit weitere Fragen und Antworten hinzuzufügen, bzw. bestehende anzupassen.
Über das Ergebnis der Antworten liefert das Quiz im Frontend visuell und akustisch ein direktes Feedback an den User. Für das akustische Feedback haben wir mit Audio-Spuren gearbeitet, die durch ein hörbares Signal übermitteln, ob die Frage richtig oder falsch beantwortet wurde. Visuell erscheinen animierte Illustrationen, die je nach Antwort eine entsprechende Gesichtsreaktion der Illustrationen zeigen. Nach jeder beantworteten Frage erscheint eine Unterseite mit der Auflösung, so dass der User stets die richtige Lösung erfährt.
Am Ende des Quiz erscheint eine Übersichtsseite mit den Ergebnissen aller Fragen. Diese passt sich dynamisch an und spielt die jeweils ausgewählten Antworten aus. Das Gesamtergebnis haben wir ebenfalls optisch mit Mikro-Animationen und akustisch mit einer Audiospur je nach Ergebnis unterlegt. Letztendlich ist das Vue-Projekt so aufgebaut, dass es jederzeit auch in einem anderen Zusammenhang für andere Zwecke verwendet werden kann. Das digitale Quiz ist also kein Wegwerf- oder Einmal-Produkt und ist somit aus der Sicht der Nachhaltigkeit sehr wichtig.
Für die Offline-Version haben wir dann die komplette Anwendung innerhalb eines Kiosk-Modus lauffähig gemacht und damit ein Offline-browserbasiertes Quiz erschaffen.
Das Quiz läuft bei uns im Foyer auf einer großen Stele im Hochkant-Format - Es sieht gut aus. Auf den Partys funktioniert es auch ohne Probleme und für die online Variante gab es auch gutes Feedback!
-Deutsches Krebsforschungszentrum HD während der Veranstaltung-
Durch eine ausgezeichnete Zusammenarbeit mit dem Deutschen Krebsforschungszentrum haben wir gemeinsam eine, wenn auch nur kleine, Prävention in Form eines Quiz geschaffen. Das Frage-Antwort-Spiel klärt im Comicstil und auf eine witzige, lockere Art zu einem sehr ernsten Thema auf. Wie auch die TYPO3-Schulung, verlief dieses Projekt hervorragend und es stehen schon nächste Projekte an. Wir freuen uns jetzt schon auf die Umsetzung!
Das Quiz im Online-Modus: finden Sie unter diesem Link
Die Webpräsenz des Deutschen Krebsforschungszentrums finden Sie unter diesem Link.
