Projektarbeit Angular JS

JavaScript Logo

Inhaltsverzeichnis

Aufgabenstellung

Projekt: Einfaches Web-Quiz

Erstellung eines einfachen, interaktiven Web-Quiz mit Multiple-Choice-Fragen.
Bitte benennen Sie die Dateien entsprechend der Projektteile und kommentieren auch den Code ausreichend, damit dieser den jeweiligen Projektteilen zugeordnet werden kann.

Vorbereitung:

  • Recherchieren Sie zu Node.Js, npm & Angular
  • Notieren Sie eine kurze Beschreibung, sowie die Anwendungsbereiche der Frameworks

Teil 1: Projektumgebung einrichten

  1. Installieren Sie Node.js und npm (falls noch nicht vorhanden).
  2. Installieren Sie Angular CLI: npm install -g @angular/cli.
  3. Erstellen Sie ein neues Angular-Projekt: ng new web-quiz.

Teil 2: Grundstruktur aufbauen

  1. Erstellen Sie eine Hauptkomponente für das Quiz.
  2. Fügen Sie eine einfache HTML-Struktur hinzu, z.B. einen Titel, eine Frage und mehrere Antwortmöglichkeiten.

Teil 3: Quiz-Daten vorbereiten

  1. Erstellen Sie eine Service-Klasse (QuizService), die eine Liste von Fragen und Antworten speichert.
  2. Jede Frage kann ein Objekt mit der Frage selbst und einem Array von Antwortmöglichkeiten sein.

Teil 4: Quiz-Logik implementieren

  1. In Ihrer Hauptkomponente importieren Sie den QuizService.
  2. Binden Sie die Fragen und Antworten an Ihre Komponentenvorlage.
  3. Fügen Sie eine Methode hinzu, um die Auswahl des Benutzers zu erfassen und zu überprüfen.

Teil 5: Benutzerinteraktion und Feedback

  1. Ermöglichen Sie dem Benutzer, eine Antwort auszuwählen und eine Schaltfläche zum Überprüfen der Antwort zu betätigen.
  2. Zeigen Sie dem Benutzer Feedback an, ob die Antwort richtig oder falsch war.

Teil 6: Stilisierung und Feintuning

  1. Verwenden Sie CSS, um Ihrem Quiz ein ansprechendes Aussehen zu geben.
  2. Testen und optimieren Sie die Benutzererfahrung.

Teil 7: Abschluss

  1. Testen Sie das Quiz gründlich.
  2. Führen Sie erforderlichenfalls Fehlerbehebungen durch.

Tipps:

  • Nutzen Sie die Angular-Dokumentation für spezifische Anleitungen.
  • Experimentieren Sie mit verschiedenen Angular-Features, um ein besseres Verständnis zu erlangen.

Dieses Projekt dient der Übung von grundlegenden JavaScript & Angular Kenntnissen, darunter DOM-Manipulation, Event-Handling und lokale Datenspeicherung. Die Verwendung von ChatGPT ist erlaubt.