Update

2019-07-11 14:39:51 +02:00
parent 40bb0f761b
commit 4ff26aabb0
10 changed files with 0 additions and 379 deletions
--- a/uebung10/notes.js
+++ b/uebung10/notes.js
@@ -1,142 +0,0 @@
 //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>
--- a/uebung10/uebung-10.pdf
+++ b/uebung10/uebung-10.pdf
--- a/uebung10/uebung10-examples/api.php
+++ b/uebung10/uebung10-examples/api.php
@@ -1,60 +0,0 @@
 <?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));
--- a/uebung10/uebung10-examples/img/cloudy.png
+++ b/uebung10/uebung10-examples/img/cloudy.png
--- a/uebung10/uebung10-examples/img/rainy.png
+++ b/uebung10/uebung10-examples/img/rainy.png
--- a/uebung10/uebung10-examples/img/snowy.png
+++ b/uebung10/uebung10-examples/img/snowy.png
--- a/uebung10/uebung10-examples/img/stormy.png
+++ b/uebung10/uebung10-examples/img/stormy.png
--- a/uebung10/uebung10-examples/img/sunny.png
+++ b/uebung10/uebung10-examples/img/sunny.png
--- a/uebung10/uebung10-examples/img/windy.png
+++ b/uebung10/uebung10-examples/img/windy.png
--- a/uebung10/uebung10-examples/weather.html
+++ b/uebung10/uebung10-examples/weather.html
@@ -1,177 +0,0 @@
 <!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>