Javascript quiz, right or wrong answer colour displaying when clicked

Question

Can anyone help me with my code on quiz in JavaScript? What I want is how I can able to display the right or wrong for the questions with a colour green or red?

// 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]+"\")'>" + options[i] + "</button>";

  }

}

function checkAnswer(selected){

console.log("User selected: " + selected);

console.log("The correct answer is: " + correctAnswer);

if(selected == correctAnswer){

  score++;

console.log("You got it right!");

  getNewQuestion();

}

else{

  livesTaken ++;

console.log("Sorry, that's incorrect");

  if(livesTaken ==3){

  quizFailed();

  }else{getNewQuestion();}

}

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;

}

Any help would be appreciated.

Answer 1

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.

Want to become a Java Expert? Join Java Certification now!!