Quiz
Die Quiz Komponente ist eine interaktive Komponente, die den User eine Frage stellt und vier Antwortmöglichkeiten anbietet. Die Auflösung wird farblich gekennzeichnet - blau für richtig und coral für falsch.
Um den einheitlichen Aufbau der einzelnen Fragen zu gewährleisten, wurde das zugrundeliegende Datenmodell in Interfaces festgehalten. Hierfür wurden zwei Schemata erstellt, ein Schema für die Fragen und ein weiteres für die Optionen. Die beiden Schemata befinden sich in dem Ordner "models".
Quiz Optionen:
-
optionNumber- die Optionen einer Frage werden von 1 bis 4 durchnummeriert -
optionContent- beinhaltet den Inhalt der Option
Quiz Fragen:
-
questionId- den einzelnen Fragen wird jeweils eine ID vergeben -
questionTopic- die Fragen erhalten ein Topic, welches mit dem Kapitelthema, in dem es sich befindet, korreliert. -
questionContent- der Inhalt der Frage -
quizOptions- ist ein Array mit den entsprechenden Optionen -
quizAnswer- die Angabe der richtigen Antwort -
selectedQuizOption- ist bei Beginn ein leerer String, welcher nur nach dem Click mit der Auswahl der Users befüllt wird.
Aktuell werden die einzelnen Fragen in einem Mock-Service festgehalten. Dieser Service beinhaltet zum einen die darzustellenden Daten und zum anderen die Methoden, um die gewünschten Fragen zu filtern und die Beantwortung der Fragen auf ihre Richtigkeit hin zu untersuchen. Der Service ist dafür verantwortlich, die von der View angeforderten Daten bereitzustellen.
Die Komponente stellt drei unterschiedliche Icons dar, je nachdem in welchem Zustand sich die Komponente befindet. Bei der Initialisierung wird ein Fragezeichen dargestellt. Die Darstellung ist an einen Boolean-Wert geknüpft, der auf true gesetzt wird, sobald eines der Buttons angeklickt wird. Hierdurch wird das Fragezeichen ausgeblendet und eines der folgenden Icons wird dargestellt, je nachdem ob die Auswahl richtig oder falsch war. Der Pfad des Icons wird erst bestimmt, nachdem ein click-Event verzeichnet wurde.
Die Optionen werden dynamisch erzeugt, in dem über das Array der verfügbaren Optionen iteriert wird und für jede Option ein einzelner Button kreiert wird.
Um eine neue Frage einzufügen, kann das Array mit einem neuen Objekt erweitert werden. Die einheitliche Benennung der questionTopic property ist besonders wichtig, da diese in den jeweiligen Kapiteln referenziert wird, um die gewünschte Frage bereitzustellen.
Um die Komponente einzubinden, genügt es in der ts-Datei das entsprechende Thema der Frage anzugeben: requestedQuizTopic: string = 'mobiltaet';.
Anschließend kann die Komponente in dem HTML-Dokument folgendermaßen eingebunden werden: <app-quiz [requestedQuizTopic]="requestedQuizTopic"></app-quiz>.
Daten & Datenbank
Die einzelnen Fragen sind zu Test-Zwecken in einem Mock-Service festgehalten. Vor dem Launch der Anwendung sollten diese Daten in einer Datenbank festgehalten werden. Hierzu sollte ein spezieller Service aufgesetzt werden. Der Mock-Service eignet sich gut zum Testen.