Add uebung10

uebung10/Database.php

@@ -0,0 +1,74 @@
+<?php
+
+
+class Database
+{
+
+    private $connection;
+
+    /**
+     * Database constructor.
+     *
+     * Baut die Verbindung zur Datenbank auf
+     */
+    public function __construct()
+    {
+        // MySQL-Zugangsdaten
+        // Hier: Automatisch auslesen aus .my.cnf. Sonst einfach von Hand eintragen
+        $user = get_current_user(); // Benutzer, dem diese Datei gehört!
+        $myCnf = parse_ini_file("/home/$user/.my.cnf");
+
+        $host = $myCnf['host'];
+        $user = $myCnf['user'];
+        $password = $myCnf['password'];
+        $database = $myCnf['database'];
+
+        $this->connection = new mysqli($host, $user, $password, $database);
+    }
+
+    /**
+     * Schließt die Verbindung zru Datenbank
+     */
+    public function __destruct()
+    {
+        $this->connection->close();
+    }
+    
+    public function getQuestions($n = 0)
+    {
+        if ($n == 0) {
+                $sql = "SELECT * FROM questions";
+        } else {
+                //n ist gesetzt
+                $sql = "SELECT * FROM questions LIMIT $n";
+        }
+
+        $result = $this->connection->query($sql);
+        $resultArray = [];
+
+        while ($line = $result->fetch_assoc()) {
+            array_push($resultArray, $line);
+        }
+
+        $result->free();
+
+        return $resultArray;
+    }
+
+        public function getQuestion($id)
+    {
+        $result = $this->connection->query("SELECT * FROM questions WHERE id = $id LIMIT 1");
+
+        $resultArray = [];
+
+        while ($line = $result->fetch_assoc()) {
+            array_push($resultArray, $line);
+        }
+
+        $result->free();
+
+        return $resultArray[0];
+    }
+
+
+}

uebung10/notes.js

@@ -0,0 +1,142 @@
+
+//button
+//<input type="number" id="n" min="1" max="20">
+//<button id="get-questions" onclick="listener()"></button>
+
+
+//CSS screens per default nicht anzeigen
+//<style>
+//  #screen1, #screen2, #screen3 {
+//      display: none;
+//      }
+//
+//
+//</style>
+
+
+
+//HTML
+//<div id="screen1">
+//  Anzahl fragen:
+//<input type="number" id="n" min="1" max="20">
+//<button id="get-questions" onclick="listener()"></button>
+//
+//<div id="screen2">
+//
+//<div id="question">Frage</div>
+//<button id="answer0">Antwort0</button>
+//<button id="answer0">Antwort0</button>
+//<button id="answer0">Antwort0</button>
+//</div>
+//
+//<div id="screen3">
+//
+//  Du hast 2 von 3 Fragen richtig
+//  <button>Neues Spiel starten</button>
+
+
+<script>
+        var questions = [];
+        var currentQuestions = 0;
+        var rightAnswers = 0
+        
+        //Screens durchschalten
+        var screen1 = document.getElementById('screen1');
+        var screen2 = document.getElementById('screen2');
+        var screen3 = document.getElementById('screen3');
+        screen1.style.display = "block";
+
+        var questionDiv = document.getElementById("question");
+        var answer0 = document.getElementById("answer0");
+        var answer1 = document.getElementById("answer1");
+        var answer2 = document.getElementById("answer2");
+
+
+//Start game
+function listener() {
+        var n = document.getElementById('n').value();
+        getQuestions(n);
+        currentQuestion = 0;
+        rightAnswers = 0;
+
+        //Screen1 verstecken, Screen2 anzeigen
+        screen1.style.display = "none";
+        screen2.style.display = "block";
+
+        var right = document.getElementById(span...);
+
+}
+
+
+function showQuestion() {
+        var question = questions[currenQuestion];
+
+        questionDiv.innerHTML = question.question;
+        answer0.innerHTML = question.answer[0];
+        answer1.innerHTML = question.answer[1];
+        answer2.innerHTML = question.answer[2];
+
+        answer0.style.backgroundColor = "gray";
+        answer1.style.backgroundColor = "gray";
+        answer2.style.backgroundColor = "gray";
+}
+
+function answerQuestion(event) {
+        var target = event.target;
+        var question = questions[currentQuestion];
+
+        console.log(target.nodeName);
+
+        if (target.id.substr(-1) == question.solution) { console.log("richtig"); target.style.backgroundColor = "green";
+                rightAnswers++;
+        } else {
+                target.style.backgroundColor = "red";
+                document.getElementById("answer" + question.solution).style.backgroundColor == "green";
+        }
+        setTimeout(function () {
+                currentQuestion++;
+                if (currentQuestion < questions.length) {
+                        showQuestion();
+                } else {
+                        showResult();
+                }
+        }, 2000);
+}
+
+
+function showResult() {
+
+        screen2.style.display = "none";
+        screen3.style.display = "block";
+
+        right.innerHTML = rightAnswers;
+        total.innerHTML = questions.length;
+} 
+
+//buttons zuweisen
+answer0.addEventListener('click', answerQuestion);
+answer1.addEventListener('click', answerQuestion);
+answer2.addEventListener('click', answerQuestion);
+
+function getQuestions() {
+        var request = new XMLHttpRequest();
+
+        request.onreadystatechange = function () {
+                if (this.readyState === 4 && this.status === 200) {
+                        console.log(JSON.parse(this.respnseText));
+
+                        questions = JSON.parse(this.responseText));
+                        
+                        //Wenn Inhalt geladen wurde
+                        showQuestion();
+                }
+        };
+
+        request.open("GET", "url");
+        request.send();
+
+}
+
+
+
+        </script>

uebung10/questions-show.php

@@ -0,0 +1,15 @@
+<?php
+
+require_once(__DIR__ . '/Database.php');
+
+$db = new Database();
+
+$n = 0;
+if (isset($_GET['n'])) {
+        $n = $_GET['n'];
+}
+$questions = $db->getQuestions($n);
+
+$questionsobj = json_encode($questions);
+echo($questionobj);
+?>

uebung10/uebung10-examples/api.php

@@ -0,0 +1,60 @@
+<?php
+
+/**
+ * Erstellt ein assoziatives Array mit zufälligen Wetterdaten
+ *
+ * @return array
+ */
+function createRandomWeather()
+{
+
+    $possibleWeatherConditions = ["cloudy", "rainy", "snowy", "sunny", "stormy", "windy"];
+
+
+    $randomWeatherCondition = $possibleWeatherConditions[array_rand($possibleWeatherConditions)];
+
+    if ($randomWeatherCondition === "snowy") {
+        $randomTemperature = rand(-30, 3);
+    } else {
+        $randomTemperature = rand(0, 45);
+    }
+
+    $certainty = rand(0, 49);
+
+
+    return [
+        "weather" => $randomWeatherCondition,
+        "temperature" => $randomTemperature,
+        "img" => $randomWeatherCondition . ".png",
+        "certainty" => $certainty
+    ];
+
+}
+
+/**
+ * Liefert ein Array mit assoziativen Arrays, die das Wetter zufällig "voraussagen"
+ *
+ * @param $n int Anzahl Tage, für die das Wetter vorausgesagt werden soll
+ * @return array
+ */
+function createRandomWeatherForNDays($n)
+{
+    $weatherForNDays = [];
+
+
+    for ($i = 0; $i < $n; $i++) {
+        $date = $tomorrow = date("d.m.Y", strtotime("+$i day"));
+        $weather = createRandomWeather();
+        $weather['date'] = $date;
+
+        $weatherForNDays[] = $weather;
+    }
+
+    return $weatherForNDays;
+}
+
+// Das Script liefert eine JSON-Ausgabe, setze daher den Content-Type auf application/json
+header('Content-Type: application/json');
+
+// Codiere das Array mit der Wettervorhersage in JSON und gib es aus
+echo json_encode(createRandomWeatherForNDays(5));

uebung10/uebung10-examples/weather.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+
+    <style>
+
+        body {
+            font-family: sans-serif;
+            text-align: center;
+        }
+
+        #weather {
+            margin: 1em auto;
+            width: 75%;
+            display: flex;
+            flex-direction: row;
+        }
+
+        .card {
+            flex-grow: 1;
+            flex-basis: 18%;
+            background-color: #eeeeee;
+            margin: 1%;
+            padding: 1%;
+            border-radius: 1em;
+            text-align: center;
+
+        }
+
+        .card img {
+
+            width: 75%;
+        }
+
+        #progress {
+            background-color: #DC143C;
+            height: 20px;
+        }
+
+    </style>
+
+</head>
+<body>
+
+
+<h1>Das Wetter für Nirgendwo auf der Welt</h1>
+
+<div id="weather">Bitte warten</div>
+
+<p>
+    Das Wetter aktualisiert sich alle 15 Sekunden. Bereits <span id="counter">0</span> mal aktualisiert!
+</p>
+
+<div id="progress"></div>
+
+<p>
+    <small>&copy; InTech-Wetter 2019, der zufälligste Wetterdienst der Welt</small>
+
+</p>
+
+<div style="font-size: x-small">Icons made by <a
+        href="https://www.freepik.com/?__hstc=57440181.cd3916a59a95c176a348a17ddf11c54b.1561971633852.1561971633852.1561985979427.2&__hssc=57440181.4.1561985979427&__hsfp=1586605741"
+        title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is
+    licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC
+        3.0 BY</a></div>
+
+
+<script>
+
+    // Zählt wie oft das Wetter bereits aktualisiert wurde
+    var updateCount = 0;
+
+
+    /**
+     * Erstellt den HTML-Code für ein DIV-Element mit der Wettervorhersage
+     * (Wir verwenden hier JavaScript Template-Strings)
+     * */
+    function createWeatherCard(weatherData) {
+
+        return `<div class="card">
+<h2>${weatherData["date"]}</h2>
+<img src="img/${weatherData['img']}">
+<p>${weatherData["temperature"]}°C</p>
+<p>${weatherData["certainty"]}% Sicherheit</p>
+</div>
+        `;
+    }
+
+
+    /**
+     * Aktualisiert die Wettervorhersage auf der Seite
+     *
+     * @var weather Array mit Wettervorhersagen
+     * */
+    function updateWeather(weather) {
+        var container = document.getElementById("weather");
+
+        container.innerHTML = "";
+
+        weather.forEach(function (data) {
+
+            container.innerHTML += createWeatherCard(data);
+
+        });
+    }
+
+
+    /**
+     * Ruft die aktuelle "Wettervorhersage" per XMLHttpRequest von der API ab
+     */
+    function fetchWeather() {
+
+        // Erzeuge ein neues XMLHttpRequest-Objekt
+        var xmlhttp = new XMLHttpRequest();
+
+        // Lege fest, was passieren soll, wenn sich der readystate des XMLHttpRequest-Objekts ändert
+        xmlhttp.onreadystatechange = function () {
+
+            // Wenn der Request beendet ist (readyState = 4) und alles OK war (status 200)
+            if (this.readyState === 4 && this.status === 200) {
+                // Wandle das Ergebnis des Requests von JSON in ein JavaScript-Objekt um
+                var weather = JSON.parse(this.responseText);
+                updateWeather(weather);
+
+            }
+            // Andernfalls: Wenn der Request beendet ist und nicht alles OK war
+            else if (this.readyState === 4 && this.status !== 200) {
+                // geben wir eine Fehlermeldung als alert aus
+                alert("Wetter konnten nicht abgerufen werden. Statuscode" + this.status);
+            }
+        };
+
+
+        xmlhttp.open("GET", "api.php", true);
+        xmlhttp.send();
+    }
+
+
+    // Ruft initial einmal das Wetter ab
+    fetchWeather();
+
+    // Ruft alle 15 Sekunden das Wetter ab
+    setInterval(function () {
+
+        // Fortschrittsbalken auf 0 setzen
+        progress = 0;
+        drawProgress();
+
+        // Update-Counter und Anzeige aktualisieren
+        updateCount++;
+        document.getElementById('counter').innerText = updateCount;
+
+        // Neues Wetter abrufen
+        fetchWeather();
+    }, 15000);
+
+    // Status der Fortschrittbalkens
+    var progress = 0;
+
+    // "Zeichnet" den Fortschrittsbalken
+    function drawProgress() {
+        document.getElementById("progress").style.width = progress * 100 / (50 * 15) + "%";
+    }
+
+    // Fortschrittsbalken alle 20 Millisekunden aktualisieren
+    setInterval(function () {
+        progress = (progress + 1) % (50 * 15);
+
+        drawProgress();
+
+    }, 20)
+</script>
+
+</body>
+</html>