//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>