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: []

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

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');
    personalQuestionFood.addChoice('assets/images/personalization-question/kaese.png', '#', '25', '5');
    personalQuestionFood.addChoice('assets/images/personalization-question/avocado.png', '#', '5', '28');
    personalQuestionFood.addChoice('assets/images/personalization-question/eier.png', '#', '25', '36');

    this.question.push(personalQuestionFood);
}

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

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

Hinweise