143 lines
3.7 KiB
JavaScript
143 lines
3.7 KiB
JavaScript
|
|
//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>
|