146 lines
4.0 KiB
HTML
146 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
#screen1, #screen2, #screen3 {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="screen1">
|
|
Anzahl fragen:
|
|
<input type="number" id="n" min="1" max="20">
|
|
<button id="get-questions" onclick="listener()">Spiel starten!</button>
|
|
</div>
|
|
|
|
<div id="screen2">
|
|
</div>
|
|
|
|
<div id="question">Frage</div>
|
|
<button id="answer0">Antwort1</button>
|
|
<button id="answer1">Antwort2</button>
|
|
<button id="answer2">Antwort3</button>
|
|
</div>
|
|
|
|
<div id="screen3">
|
|
Du hast <span id="right"></span> von <span id="total"></span> Fragen richtig
|
|
<button id="newgame" onclick="newGame()">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");
|
|
|
|
//buttons zuweisen
|
|
answer0.addEventListener('click', answerQuestion);
|
|
answer1.addEventListener('click', answerQuestion);
|
|
answer2.addEventListener('click', answerQuestion);
|
|
|
|
//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('right');
|
|
var total = document.getElementById('total');
|
|
}
|
|
|
|
//Start a new game
|
|
function newGame() {
|
|
window.location = "http://134.2.6.146/~zxmpy88/uebung10/quiz.html";
|
|
}
|
|
|
|
|
|
function showQuestion() {
|
|
var question = questions[currentQuestion];
|
|
|
|
questionDiv.innerHTML = question.question;
|
|
answer0.innerHTML = question.answers[0];
|
|
answer1.innerHTML = question.answers[1];
|
|
answer2.innerHTML = question.answers[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;
|
|
}
|
|
|
|
function getQuestions() {
|
|
var request = new XMLHttpRequest();
|
|
|
|
request.onreadystatechange = function () {
|
|
if (this.readyState === 4 && this.status === 200) {
|
|
console.log(JSON.parse(this.responseText));
|
|
|
|
questions = JSON.parse(this.responseText);
|
|
|
|
//Wenn Inhalt geladen wurde
|
|
showQuestion();
|
|
}
|
|
};
|
|
|
|
request.open("GET", "http://134.2.6.146/~zxmpy88/uebung10/api.php");
|
|
request.send();
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|