Entwicklung eines QuizEwgenij Mauch | LOYALTY & CONVERSION

Entwicklung eines Quiz

Eine unserer Maßnahmen im Rahmen des DNI-Projektes ist es, eine Kombination aus Quiz und Gewinnspiel zu entwickeln, um die Loyalität der Nutzer und die Anzahl der Registrierungen zu steigern.

Der Nutzer soll bei dem Quiz sowohl unterhalten, als auch informiert werden. Ein möglicher Gewinn dient außerdem als zusätzliche Motivation an dem Gewinnspiel teilzunehmen. Bei dem Quiz muss der Nutzer Fragen beantworten. Beantwortet der Nutzer 7 von 10 Fragen korrekt, ist die Teilnahme an der Verlosung möglich. Hierfür ist jedoch eine Registrierung oder Anmeldung auf dem Portal notwendig.

Anforderungen an das Quiz sind, dass es sich zum einen einfach bedienen lässt und zum anderen flüssig läuft – auch mobil. Außerdem soll das Quiz auf allen Portalen der NOZ/mh:n einsetzbar sein und zentral gepflegt werden können.

Für die Programmierung wurden die Sprachen HTML/CSS/JavaScript (jQuery) verwendet. Der Versand von Double-Opt-In E-Mails findet über unseren Dienstleister Evalanche statt. Die Formular-Logik geschieht über eine zentrale PHP-Applikation.

Die Fragen und Antworten, welche im Quiz angezeigt werden, werden in einer JSON-Datei aufgelistet. Das Skript generiert automatisch aus der Datei die jeweiligen Quizfragen und Antworten. Diese können einfach hinzugefügt und entfernt werden. Das HTML oder JavaScript muss dafür nicht angepasst werden.

Der Spieler beantwortet die Fragen, indem er auf eine der Optionen klickt. Wenn die Antwort des Benutzers richtig ist, wird die Anzahl der richtigen Antworten um eins erhöht und die Antwortmöglichkeit grün eingefärbt. Ist die Antwort falsch, färbt sich die Antwortmöglichkeit rot. Eine Erklärung, warum die Antwort falsch oder richtig ist, wird eingeblendet.

Quiz-Vorschau im BrowserEwgenij Mauch | LOYALTY & CONVERSION

Sobald alle Fragen beantwortet wurden, wird dem Nutzer angezeigt, wie viele Fragen er richtig beantwortet hat. Wurden weniger als 7 Fragen richtig beantwortet, gibt es keine Möglichkeit, an dem Gewinnspiel teilzunehmen. Der Nutzer erhält an dieser Stelle die Möglichkeit, das Quiz nochmal zu spielen. Hat der Nutzer mindestens 7 Fragen richtig beantwortet, erscheint ein Formular, mit dem sich der Nutzer auf dem Portal registrieren oder mit seinen vorhandenen Zugangsdaten anmelden kann. Bei einer Registrierung muss der Nutzer für die Teilnahme über ein Double-Opt-In-Verfahren seine E-Mail-Adresse bestätigen. Erst dann nimmt er an der Verlosung teil.

Entwicklung

Das Quiz wurde als ein jQuery Plugin entwickelt, welches ausgeführt wird, sobald die Seite aufgerufen wurde. Auf diese Weise bleiben die Variablen außerhalb des globalen Geltungsbereichs und das Quiz wird von anderen Skripten, die auf der Seite ausgeführt werden, nicht beeinträchtigt.

Dadurch, dass das Quiz nicht über ein iFrame eingebunden ist, können die Stile für das jeweilige Portal durch Überschreibungen individuell angepasst werden.

Die Implementierung auf einer Website ist simpel. Dafür muss lediglich dieser Code eingebunden werden, wobei jQuery als Bibliothek auf der Seite vorhanden sein sollte:

<script src=“https://dni.shz.de/quiz/js/main.min.js“></script>
<div class=“quiz-widget“ data-url=“https://dni.shz.de/quiz/data/os/quiz.json“></div>

Bei der Entwicklung haben wir unser Augenmerk darauf gelegt, dass das Quiz sowohl online über einen Desktop als auch auf mobilen Endgeräten gut funktioniert. Eine interessante Erkenntnis konnten wir aus einer Zielgruppen-Analyse ziehen, die ergab, dass über 90% der Nutzer über ein Smartphone auf das Quiz zugreifen.

Der große Vorteil an dem von uns entwickelten Quiz ist, dass es an unsere Bedürfnisse zugeschnitten ist und beliebig modifiziert und erweitert werden kann.

Das Quiz befindet sich aktuell noch in der Testphase. Wenn wir mit dem Prototypen unsere definierten Ziele für unser Projekt erreichen, wird für das Quiz ein Backend entwickelt, um Redakteuren die Möglichkeit zu bieten, das Quiz selbst erstellen zu können.

Hier können Sie das Quiz ausprobieren. Viel Spaß beim Quizzen:

Über den Autor

Ewgenij Mauch arbeitet als Frontend-Entwickler bei Project Loyalty & Conversion.

© 2019 Loyalty & Conversion · Crumbs Theme von WPCrumbs