You can use the below code to achieve that, over here I have use the setTimeout method for showing the correct answer of the user:
// This initialises a request to the trivia database API
var xmlhttp = new XMLHttpRequest();
var url = "https://opentdb.com/api.php?amount=1&category=21&difficulty=easy&type=multiple";
var score = 0;
var livesTaken = 0;
var question;
var type;
var correctAnswer;
var incorrect1;
var incorrect2;
var incorrect3;
// This requests the data
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var jsondata = JSON.parse(this.responseText);
getData(jsondata);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
// This function is used to extract the received data
function getData(data) {
// This is the question:
question = data.results[0].question;
// This is the question type eg. multiple choice
type = data.results[0].type;
// This is the correct answer
correctAnswer = data.results[0].correct_answer;
// These are the three incorrect answers
incorrect1 = data.results[0].incorrect_answers[0];
incorrect2 = data.results[0].incorrect_answers[1];
incorrect3 = data.results[0].incorrect_answers[2];
// randomly select answer and other options and place in array
// then display elements from array on the buttons
var randoms = []; // an array to store unique random numbers
var random;
// loop runs four times...
for(i=0; i < 4; i++){
// generates a random number between 0 and 3
random = Math.floor(Math.random() * 4);
// checks if random number already in array...
while(randoms.includes(random)){
// generates another random number
random = Math.floor(Math.random() * 4);
}
// adds random number to array
randoms.push(random);
}
var options = [];
console.log(randoms);
options[randoms[0]] = correctAnswer;
options[randoms[1]] = incorrect1;
options[randoms[2]] = incorrect2;
options[randoms[3]] = incorrect3;
console.log(options);
// This displays the question and answer options
document.getElementById("trivia").innerHTML = question;
for(i=0; i < options.length; i++){
document.getElementById("trivia").innerHTML += "<br><button onclick='checkAnswer(\""+options[i]+"\", this)'>" + options[i] + "</button>";
}
}
function checkAnswer(selected, element){
console.log("User selected: " + selected);
console.log("The correct answer is: " + correctAnswer);
if(selected == correctAnswer){
score++;
console.log("You got it right!");
element.style.background = "green";
setTimeout(function(){
getNewQuestion();
}, 2000);
}
else{
livesTaken ++;
console.log("Sorry, that's incorrect");
element.style.background = "red";
if(livesTaken ==3){
quizFailed();
}else{
setTimeout(function(){
getNewQuestion();
}, 2000);
}
}
console.log(score)
console.log(livesTaken)
}
function getNewQuestion(){
// This requests the data
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var jsondata = JSON.parse(this.responseText);
getData(jsondata);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function quizFailed(){
document.getElementById("trivia").style.display = "none"
document.getElementById("endingText").innerHTML = "You have run out of lives, you scored " + score + " pretty bad ngl" + " <button>click to restart</button>"
score = 0;
livesTaken = 0;
}
I hope this will help.
Back