# JavaScript Quiz Teil 3: Fetch, Animationen und Datenbankanbindung

# Aufgabenstellung

## Aufgabe 1: Fragen mit JavaScript vom Backend laden

### Setup
Kopiere den letzten Stand deines Quizzes von `quiz-v2/` nach  `quiz-v3/javascript/`

### TO-DO
Lade die Fragen in `./scripts/questions.js` -> da, wo sie in v2 auch definiert wurden. Hier exportierst du nun eine asynchrone Funktion, die alle Fragen von einem HTTP-Endpunkt holt. Du kannst den von uns vorbereiteten [Endpunkt](http://users.ct.fh-salzburg.ac.at/~bjelline/quiz-v3/questions.php) verwenden, er liefert Fragen im selben JSON-Format wie bisher. Klick mal auf den Link und schau dir an, was dahinter steckt.

Verwende folgende Methodensignatur in `./scripts/questions.js``
```js
export function getQuestions() {
    // Fragen mit fetch() vom vorbereiteten Endpunkt holen
    // gibt (wie gewohnt) ein Array zurück, das Frage-Objekte enthält
}
```

Verwende die Funktion dann in `./scripts/quiz.js`
```js
import { getQuestions } from './questions.js';
```

Verwende dieses neue Array nun statt deinem alten, statisch definierten Fragen-Array. Nutze die Keywords `async`und `await`.

## Aufgabe 2 - Animationen einbauen

Baue mit CSS oder JavaScript Animationen ein, die Feedback geben und Spaß machen. Mindestanforderungen:

- Mindestens eine (selbst definierte) @keyframes Animation und eine Verwendung von CSS `animation` muss in `./css/styles.css` vorhanden sein

Siehe [Vorlesungsunterlagen](https://web-development.github.io/grafik/cssgrafik/#slide-0), [Keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@keyframes) und [CSS Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation)


## BONUS Aufgabe 3: Fragen mit PHP direkt aus der Datenbank laden -> vor allem wichtig für Web MMP1!

### Setup
Kopiere den letzten Stand deines Quizzes von `quiz-v2/` nach  `quiz-v3/php/`

### TO-DO
Erzeuge auf Deinem Entwicklungsrechner eine Datenbank `quiz_db` und lade die Daten aus quiz.sql

Am Server **users.ct.fh-salzburg.ac.at** existiert bereits eine Datenbank `quiz_db` mit Quizzes zu verschiedenen Themen. Mit dem Usernamen db1_reader (für diese Übung ist der User für jeden gleich) und demselben Passwort wie im ersten Teil des Semesters kannst du diese Datenbank abfragen, z.B. auf der Kommandozeile mit psql:

    psql -U db1_reader -h users.ct.fh-salzburg.ac.at -W quiz_db

Was bedeuten die Parameter:

    -U db1_reader                     # als user db1_reader anmelden
    -h users.ct.fh-salzburg.ac.at  # mit diesem server verbinden
    -W                                # ich bin bereit ein passwort einzutippen
    quiz_db                          # das ist der name der Datenbank die ich verwenden will

Alternativ kannst du auch wieder PHPStorm verwenden oder du nutzt ein Programm wie TablePlus.

Schreibe ein PHP Programm `fetchQuestions.php` das Fragen aus der Datenbank liest und als JSON ausgibt, gleich wie der von uns vorbereitete [fertige Endpunkt](http://users.ct.fh-salzburg.ac.at/~bjelline/quiz-v3/questions.php)

Dazu zwei Tipps: Ein guter Anfang wäre:
```php
<?php
    header('Content-Type: application/json');
    ini_set('display_errors', true);
    require_once 'config.php';
```

Und ein gutes Ende wäre:
```php
echo json_encode($array_of_questions);
```


`json_encode` konvertiert die PHP-Array zu JSON und `echo` gibt es auf der Seite aus
---

## Tipps Tipps Tipps
* Du kannst mit der Gemini AI über ein [PHP Skript](https://users.ct.fh-salzburg.ac.at/~bjelline/quiz-backend/index.php) neue Fragen und Antworten generieren.

## Dateiliste
sowohl am Webspace, als auch auf Gitlab

### VERPFLICHTEND: In `quiz-v3/javascript/`

| Datei | Hinweis |
| ------ | ------ |
| index.html |  Enthält das Quiz.
| ./css | Ordner für Stylesheets. Enthält mindestens styles.css
| ./scripts/script.js | Lädt weitere Module. Stellt Verbindung von DOM und Quiz-Klasse her. Entrypoint, wird in index.html eingebunden
| ./scripts/questions.js | Lädt die Fragen, exportiert asynchrone Funktion `getQuestions`
| ./scripts/quiz.js | exportiert die Klasse `QuizApp`

### BONUS: In `quiz-v3/php/`
| Datei | Hinweis |
| ------ | ------ |
| index.html |  Enthält das Quiz.
| ./css | Ordner für Stylesheets. Enthält mindestens styles.css
| ./scripts/script.js | Lädt weitere Module. Stellt Verbindung von DOM und Quiz-Klasse her. Entrypoint, wird in index.html eingebunden
| ./scripts/question.js | Lädt die Fragen, exportiert asynchrone Funktion `getQuestions`
| ./scripts/quiz.js | exportiert die Klasse `QuizApp`
| fetchQuestions.php |