Trivia

Aufgabe

Schreiben Sie eine Webseite, die es Benutzern ermöglicht, Trivia-Fragen zu beantworten.

Fragen

Bevor Sie beginnen

Melden Sie sich bei cs50.dev an, klicken Sie auf Ihr Terminalfenster und führen Sie cd aus. Die Eingabeaufforderung Ihres Terminalfensters sollte ungefähr wie folgt aussehen:

$

Führen Sie den Befehl

wget https://inf.zone/download/exercises/08/trivia.zip

aus, um in Ihrem Codespace die ZIP-Datei trivia.zip herunterzuladen.

Nun können Sie

unzip trivia.zip

ausführen, um die ZIP-Datei in den Ordner trivia zu entpacken.

Sie benötigen die ZIP-Datei nicht mehr, daher können Sie den Befehl

rm trivia.zip

ausführen und bei der Aufforderung mit „y“ gefolgt von der Eingabetaste antworten, um die heruntergeladene ZIP-Datei zu entfernen.

Geben Sie nun den Befehl

cd trivia

ein und drücken Sie anschließend die Eingabetaste, um in dieses Verzeichnis zu wechseln (d.h. es zu öffnen). Ihre Eingabeaufforderung sollte nun wie folgt aussehen:

trivia/ $

Falls alles erfolgreich war, führen Sie den folgenden Befehl aus:

ls

Sie sollten nun die Dateien index.html und styles.css sehen.

Falls es zu Problemen kommt, wiederholen Sie dieselben Schritte und versuchen Sie herauszufinden, wo ein Fehler aufgetreten sein könnte!

Implementierungsdetails

Erstellen Sie eine Webseite mit HTML, CSS und JavaScript, um Benutzern das Beantworten von Quizfragen zu ermöglichen.

  • In index.html, fügen Sie unter „Part 1“ eine Multiple-Choice-Quizfrage Ihrer Wahl mit HTML hinzu.

    • Verwenden Sie eine h3-Überschrift für den Text Ihrer Frage.
    • Fügen Sie für jede mögliche Antwortauswahl einen button hinzu. Es sollten mindestens drei Antwortmöglichkeiten vorhanden sein, von denen genau eine korrekt ist.

  • Verwenden Sie JavaScript, um folgende Logik hinzuzufügen:

    • Wenn ein Benutzer auf einen Button mit einer falschen Antwort klickt, sollte der Button rot werden, und unter der Frage sollte ein Text erscheinen, der „Falsch!“ anzeigt.
    • Wenn ein Benutzer auf einen Button mit der richtigen Antwort klickt, sollte der Button grün werden, und unter der Frage sollte ein Text erscheinen, der „Richtig!“ anzeigt.

  • In index.html, fügen Sie unter „Part 2“ eine Frage mit einer Freitexteingabe Ihrer Wahl hinzu:

    • Verwenden Sie eine h3-Überschrift für den Text Ihrer Frage.
    • Verwenden Sie ein input-Feld, um den Benutzer eine Antwort eingeben zu lassen.
    • Fügen Sie einen button hinzu, um die Antwort des Benutzers zu bestätigen.

  • Verwenden Sie JavaScript, um folgende Logik hinzuzufügen:

    • Wenn der Benutzer eine falsche Antwort eingibt und den Bestätigungsbutton klickt, sollte das Eingabefeld rot werden, und unter der Frage sollte ein Text erscheinen, der „Falsch!“ anzeigt.
    • Wenn der Benutzer die richtige Antwort eingibt und den Bestätigungsbutton klickt, sollte das Eingabefeld grün werden, und unter der Frage sollte ein Text erscheinen, der „Richtig!“ anzeigt.

Optional sind noch folgende Schritte denkbar:

  • Die Datei styles.css bearbeiten, um das Design Ihrer Webseite anzupassen.
  • Weitere Fragen zu Ihrem Quiz hinzufügen, wenn Sie möchten.

Hilfestellung

  • Verwenden Sie document.querySelector, um ein einzelnes HTML-Element abzufragen.
  • Verwenden Sie document.querySelectorAll, um mehrere HTML-Elemente abzufragen, die einer Abfrage entsprechen. Die Funktion gibt ein Array mit allen übereinstimmenden Elementen zurück.

Testen

Für diese Aufgabe gibt es kein check50, da die Implementierungen sehr unterschiedlich ausfallen können. Stellen Sie jedoch sicher, dass Sie sowohl falsche als auch richtige Antworten für jede Ihrer Fragen testen, um sicherzustellen, dass Ihre Webseite angemessen reagiert.

Starten Sie http-server in Ihrem Terminal, während Sie sich im Verzeichnis trivia befinden, um einen Webserver zu starten, der Ihre Webseite bereitstellt.

Homepage