Persönliche Frage

Personalization Question Component

Diese Komponente dient dazu, dem Nutzer über eine Frage mit mehreren Antwortmöglichkeiten, auf seine Interessen zugeschnittene Inhalten darzustellen. Sie besteht aus einer Frage und mehreren Antwortmöglichkeiten in Form von Bildern. Der Klick auf eine Antwortmöglichkeit führt zu einer anderen Komponente mit Inhalten zu diesem Thema.

Aufbau

Die Komponente besteht aus folgenden austauschbaren Bestandteilen:

• Einer Fragestellung questionTitle: string
• Einem Hintergrundbild backgroundImagePath: string
• Einem Array an Antwortmöglichkeiten choices: []
• Einem Link zum Überspringen der Frage, der zur nächsten Komponente führt link: string

Die Antwortmöglichkeiten bestehen wiederum aus

• Einem Hintergrundbild imagePath
• Einem link zur Komponente mit dem passenden Inhalt link
• Einer x-Achsen Position des Antwortbuttons posX
• Einer y-Achsen Position des Antwortbuttons posY
• Einem z-Index des Antwortbuttons zIndex

Verwendung

Um die Komponente wiederzuverwenden können die oben genannten Variablen in einer .ts an die Komponente übergeben werden. Beispiel:

question: PersonalQuestion[] = [];
ngOnInit(): void {
    let personalQuestionFood = PersonalQuestion.createWith('Was isst du gerne?', 'assets/images/personalization-question/kapitel1_table_background.png', '#' );
    personalQuestionFood.addChoice('assets/images/personalization-question/fleisch.png', '#', '-5', '6','1');
    personalQuestionFood.addChoice('assets/images/personalization-question/kaese.png', '#', '25', '5','1');
    personalQuestionFood.addChoice('assets/images/personalization-question/avocado.png', '#', '5', '28','1');
    personalQuestionFood.addChoice('assets/images/personalization-question/eier.png', '#', '25', '36','1');

    this.question.push(personalQuestionFood);
}

In der .html wird an entsprechender Stelle die Komponente eingefügt.

<app-personalization-question [personalQuestions]="question"></app-personalization-question>

Hinweise

Aktuell ist die Komponente nur für Desktop-Auflösungen ausgelegt. Um sie auch für Mobilgeräte responsive zu gestalten, müsste man zusätzlich eine x- & y-Position für mobile-devices an die Komponente übergeben und prüfen um welche Auflösung es sich handelt. Eventuell muss an dieser Stelle das Design noch auf kleinere Bildschirme angepasst werden.