# Trivia

Quelle: https://dev.inf.zone/exercises/12/trivia/

## Aufgabe

**Auf einen Blick**

- **Was:** Eine Quiz-Webseite mit zwei Fragen, die per JavaScript sofort meldet, ob eine Antwort richtig ist.
- **Dateien:** `index.html` und `styles.css` im Ordner `trivia` aus dem Codegerüst. HTML und JavaScript schreiben Sie in `index.html`.
- **Teil 1:** eine Multiple-Choice-Frage mit Buttons. Ein Klick färbt den Button grün (richtig) oder rot (falsch).
- **Teil 2:** eine Freitextfrage mit Eingabefeld und Bestätigungsbutton. Nach dem Klick wird das Eingabefeld grün oder rot.
- **Rückmeldung:** In beiden Teilen erscheint unter der Frage zusätzlich „Richtig!“ oder „Falsch!“.
- **Prüfen:** vor allem im Browser, dazu mit `check50`.

### So prüft JavaScript eine Antwort

1. **Warten, bis die Seite geladen ist:** Das `<script>`-Element im Codegerüst steht im `<head>`, läuft also, bevor der Browser die Fragen im `<body>` kennt. Code, der Elemente der Seite sucht, gehört deshalb in `document.addEventListener('DOMContentLoaded', function() { … });`.
2. **Element finden:** `document.querySelector('…')` liefert das erste Element, das zu einem CSS-Selektor passt, etwa `'#id'`, `'.klasse'` oder `'input'`.
3. **Auf den Klick warten:** `element.addEventListener('click', function() { … });` führt die Funktion bei jedem Klick auf das Element aus.
4. **Rückmeldung geben:** In dieser Funktion ändert `element.style.backgroundColor = 'red';` die Farbe, und `element.innerHTML = '…';` setzt den Text eines Elements.

**Beispiel:** Ein Klick auf den Button färbt ihn gelb und schreibt „Geklickt!“ in den leeren Absatz darunter.

```html
<button id="knopf">Klick mich</button>
<p id="rueckmeldung"></p>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let knopf = document.querySelector('#knopf');
        knopf.addEventListener('click', function() {
            knopf.style.backgroundColor = 'yellow';
            document.querySelector('#rueckmeldung').innerHTML = 'Geklickt!';
        });
    });
</script>
```

Mehr dazu steht in den [Notizen zur Vorlesung](https://dev.inf.zone/lectures/8-web/notes8/#javascript).

## Demo

So könnte Ihre Seite aussehen, bevor jemand eine Antwort gibt:

![Beispiel einer Trivia-Seite mit einer Multiple-Choice-Frage und einer Freitextfrage](https://dev.inf.zone/exercises/12/trivia/./questions.png)

## Aufgabenmaterial

Für diese Aufgabe werden Sie ein von uns zur Verfügung gestelltes Codegerüst vervollständigen.

**Aufgabenmaterial herunterladen**

Öffnen Sie VS Code entsprechend Ihrem [Setup](https://dev.inf.zone/extras/setup/), klicken Sie auf Ihr Terminalfenster und führen Sie `cd` aus. Die Eingabeaufforderung Ihres Terminalfensters sollte ungefähr wie folgt aussehen:
```bash
$
```

Führen Sie den Befehl
```bash
wget https://dev.inf.zone/download/exercises/12/trivia.zip
```
aus, um die ZIP-Datei `trivia.zip` in den aktuellen Ordner herunterzuladen.

Nun können Sie
```bash
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
```bash
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
```bash
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:
```bash
trivia/ $
```

Falls alles erfolgreich war, führen Sie den folgenden Befehl aus:
```bash
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!

| Datei        | Inhalt |
| ------------ | ------ |
| `index.html` | Überschrift „Trivia!“, darunter die Abschnitte „Part 1: Multiple Choice“ und „Part 2: Free Response“, jeweils mit einem `TODO`-Kommentar für Ihre Frage. Im `<head>` ein leeres `<script>`-Element für Ihr JavaScript. |
| `styles.css` | fertige Gestaltung, u. a. für `button` und `input[type="text"]`. Dürfen Sie beliebig ändern. |

## Spezifikation

### Part 1: Multiple Choice

- Fügen Sie in `index.html` unter „Part 1“ eine Multiple-Choice-Frage Ihrer Wahl ein.
- Der Text der Frage steht in einer `h3`-Überschrift.
- Jede Antwortmöglichkeit ist ein `button`. Es gibt mindestens drei, genau eine davon ist richtig.

### Part 2: Free Response

- Fügen Sie unter „Part 2“ eine Freitextfrage Ihrer Wahl ein.
- Der Text der Frage steht in einer `h3`-Überschrift.
- Die Antwort wird in ein `input`-Feld eingegeben und mit einem `button` bestätigt.

### Rückmeldung per JavaScript

| Aktion                                        | färbt sich …           | Text unter der Frage |
| --------------------------------------------- | ---------------------- | -------------------- |
| Klick auf einen Button mit falscher Antwort   | der Button rot         | „Falsch!“            |
| Klick auf den Button mit der richtigen Antwort | der Button grün        | „Richtig!“           |
| falsche Eingabe, dann Bestätigungsbutton      | das Eingabefeld rot    | „Falsch!“            |
| richtige Eingabe, dann Bestätigungsbutton     | das Eingabefeld grün   | „Richtig!“           |

### Optional

- Passen Sie das Design in `styles.css` an.
- Fügen Sie weitere Fragen hinzu.

## Hilfestellung

Klicken Sie auf die folgenden Tipps, um einige Ratschläge zu erhalten. Versuchen Sie aber zunächst, selbst so weit wie möglich zu kommen.

**Elemente auswählen**

- Verwenden Sie [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), um ein einzelnes HTML-Element abzufragen.
- Verwenden Sie [`document.querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), um alle HTML-Elemente abzufragen, die zu einem Selektor passen. Die Funktion gibt eine `NodeList` zurück, die Sie wie ein Array mit `for (let element of liste) { … }` durchlaufen können.
- Findet `querySelector` nichts (Ergebnis `null`), läuft Ihr Code vermutlich, bevor die Seite geladen ist. Siehe oben: `DOMContentLoaded`.

## Testen

Testen Sie vor allem im Browser. `check50` (unten unter „Korrektheit“) prüft nur das Grundgerüst, da die Implementierungen sehr unterschiedlich ausfallen können.

Starten Sie im Ordner `trivia` einen Webserver, der Ihre Webseite bereitstellt, und öffnen Sie die Adresse, die er ausgibt:

```bash
http-server
```

Testen Sie für jede Frage eine falsche und die richtige Antwort und vergleichen Sie Farbe und Text mit der Tabelle in der Spezifikation.

### Korrektheit

Führen Sie in Ihrem Terminal den folgenden Befehl aus, um die Korrektheit Ihrer Arbeit zu überprüfen:

```bash
check50 -l inf-zone/exercises/2026/trivia
```

## Abgeben

Geben Sie im Ordner `trivia` ab:

```bash
inf upload trivia
```

Danach sehen Sie, welche Tests Ihr Programm besteht und ob die Übung für die Bonuspunkte zählt. Wie Sie `inf` installieren und sich anmelden, steht unter [Abgeben mit `inf`](https://dev.inf.zone/faq/uebung-solutions/#inf-installieren).