Idee / Motivation

Bei dem Projekt SocketQuiz handelt es sich um ein Quiz Applikation bei der eine Person ein Quiz starten bzw. freigeben kann. Alle Personen die den QR Code des Spiels scannen oder den Spielecode eingeben, können diesem Quiz beitreten. Alle Spieler können anschließend einen Playername eingeben und warten dann auf den Spielbeginn. Sobald alle Spieler dem Quiz beigetreten sind, kann der Quizleiter das Quiz starten. Daraufhin erhalten alle Spieler die erste Frage. Beantwortet ein Spieler die Frage sieht er sofort ob sie richtig oder falsch war. Haben alle Spieler die Frage beantwortet schaltet der Spielleiter die nächste Frage frei.

Funktionen der Applikation

Spielleiter

 

Login
Der Spielleiter kann sich mit seinen Zugangsdaten in der Applikation einloggen. Er sieht dann eine Übersicht all seiner Quizes.

Freigabe
Der Spielleiter kann ein Quiz freigeben oder deaktivieren. Nur wenn ein Quiz freigegeben ist können Spieler diesem beitreten.

Leitung
Sobald ein Quiz freigegeben wurde, wird der Spielleiter zur Quiz Administration weitergeleitet. Hier wird nun der QR Code und der Game Code des Quizes angezeigt. Die Spieler können nun dem Quiz beitreten. Danach kann der Spielleiter auf den “Start”-Button klicken um die erste Frage freizugeben. Beim Spielleiter so wie bei den Spielern wird die Frage und alle Antwortmöglichkeiten angezeigt. Haben alle Spieler die Frage beantwortet kann der Spielleiter mit dem “Next”-Button die nächste Frage freigeben. Sollte es sich um die letzte Frage handeln, wird der “Next”-Button zum “Finish”-Button. Der Spielleiter kann nun das Spiel beenden und bekommt die drei besten Spieler angezeigt.

Spieler

Beitreten

Der Spieler hat zwei Möglichkeiten um einem Quiz beizutreten. Die erste Möglichkeit ist das Scannen des QR-Codes und die zweite die Eingabe des Game Codes. Sobald der Spieler einem Quiz beigetreten ist, kann er/sie einen Namen eingeben.

Beantworten

Der Spieler kann freigeschaltete Fragen beantworteten und sieht sofort sein Ergebnis. Abschließend sieht er/sie wieviele Fragen er/sie falsch und richtig beantwortet hat.

 

Umsetzung

Die Applikation besteht aus einem Client und einem Serverteil. Die Client Applikation – sowohl der Spielleiter als auch der Spieler Part – habe ich mit dem Framework Angular umgesetzt. Um ein Design, das den Material Design Richtlinien entspricht, verwenden zu können, habe ich das Angular Material Plugin verwendet. Für die Erstellung der QR-Codes habe ich das Plugin angular-qrcode verwendet. Außerdem wurde für die WebSocket Kommunikation mit dem Server das Socket.io Plugin für Angular verwendet.

Bei dem Server handelt es sich um einen Node.js Server der mit Typescript und ESLint programmiert wurde. Für die Kommunikation mit dem Client wurde auch hier die Socket.io Library verwendet. Um die Quizes und die Benutzer Daten zu speichern wurde eine MySQL Datenbank verwendet. Für einen schnelleren und einfacheren Zugriff auf die Datenbank, habe ich das ORM Mapping von Sequelize verwendet. Um den lokalen Server auf den richtigen Serven zu deployen habe ich den Process Manager pm2 verwendet.