Add quiz stuff

2019-07-11 12:58:05 +02:00
parent b192374d7c
commit 52462ebc2d
1 changed files with 148 additions and 0 deletions
--- a/uebung10/quiz.html
+++ b/uebung10/quiz.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<head>
+        <meta charset="utf-8">
+<style>
+  #screen1, #screen2, #screen3 {
+      display: none;
+  }
+
+</style>
+
+</head>
+<body>
+<!--
+//button
+//<input type="number" id="n" min="1" max="20">
+//<button id="get-questions" onclick="listener()"></button>
+-->
+
+
+
+<div id="screen1">
+        Anzahl fragen:
+        <input type="number" id="n" min="1" max="20">
+        <button id="get-questions" onclick="listener()"></button>
+</div>
+
+<div id="screen2">
+</div>
+
+<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>
+</div>
+
+<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>
+
+</body>
+</html>