Javascript测验，单击时显示正确或错误的答案颜色

问题描述

是否有一种方法可以在javascript测验中以正确（绿色）和错误（红色）的颜色显示正确或错误的问题

因此，当您单击答案时，我希望它在单击时显示绿色（绿色（正确答案）或红色（错误答案）

哦，点击重启按钮不起作用

如果您输错了3个错误（1个错误的问题= 1条生命的损失），那么测验将继续进行。

希望有人可以帮助您

这是下面链接的代码

codepen link

这也是我的代码

// 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",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;
}

body{
                font-family: Arial;
            }
            div#test{
                border: 1px solid #5AB029;
                padding: 10px 40px 40px 40px;
                background-color: #E5FCE3;
                border-radius: 3px;
                width: 50%;
            }

<html>

<head>
    <link rel="stylesheet" href="Actualquiz.css">
    <title>Sport Quiz (Medium)</title>
    <Meta charset="utf-8" />
    <script src="script.js"></script>
    <div id="trivia"></div>
    <div id ="endingText"></div>
    <div id ="score"></div>
</head>

<body>

</body>

</html>

解决方法

您必须将单击的元素传递给checkAnswer函数，并根据需要更改背景样式属性。

注意：在这里，我使用了setTimeout函数来延迟下一个问题的加载，以便用户可以在几秒钟内看到他们的答案是否正确。

// 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",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;
}

body{
                font-family: Arial;
            }
            div#test{
                border: 1px solid #5AB029;
                padding: 10px 40px 40px 40px;
                background-color: #E5FCE3;
                border-radius: 3px;
                width: 50%;
            }

<html>

<head>
    <link rel="stylesheet" href="Actualquiz.css">
    <title>Sport Quiz (Medium)</title>
    <meta charset="utf-8" />
    <script src="script.js"></script>
    <div id="trivia"></div>
    <div id ="endingText"></div>
    <div id ="score"></div>
</head>

<body>

</body>

</html>

dom-manipulation javascript

Javascript测验，单击时显示正确或错误的答案颜色

问题描述

解决方法

相关问答