Question

标题表明我需要帮助，如何在我的JavaScript测验的末尾显示正确和错误的答案。我尝试了各种方法，但似乎都没有用。我尝试突出显示，在分数旁边书写并在分数下方显示，但是我尝试的任何方法似乎都无效。感谢x

var total_seconds = 30 * 1;
var c_minutes = parseInt(total_seconds / 60);
var c_seconds = parseInt(total_seconds % 60);
var timer;

function CheckTime() {
  document.getElementById("quiz-time-left").innerHTML =
    "Time Left: " + c_minutes + " minutes " + c_seconds + " seconds ";

  if (total_seconds <= 0) {
    score();
  } else {
    total_seconds = total_seconds - 1;
    c_minutes = parseInt(total_seconds / 60);
    c_seconds = parseInt(total_seconds % 60);
    timer = setTimeout(CheckTime, 1000);
  }
}
timer = setTimeout(CheckTime, 1000);

function highlightAnswerWithClass(question, answer, className) {
  var answers = document.forms.form[question];

  for (var index = 0; index < answers.length; index++) {
    if (answers[index].value === answer) {
      answers[index].classList.add(className);
    }
  }
}

function score() {
  // stop timer
  clearInterval(timer);

  //Referencing the value of the questions
  var q1 = document.forms.form.q1.value;
  var q2 = document.forms.form.q2.value;
  var q3 = document.forms.form.q3.value;
  var q4 = document.forms.form.q4.value;
  var q5 = document.forms.form.q5.value;
  var q6 = document.forms.form.q6.value;

  // disable form
  var elements = document.getElementById("questions").elements;
  for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = true;
  }

  //Array for the questions
  var questions = [q1, q2, q3, q4, q5, q6];

  //Answers for each question
  var answers = ["b", "b", "b", "b", "b", "b"];

  //variable to keep track of the points
  var points = 0;
  var total = 6;
  //max score

  //Making use of a for loop to iterate over the questions and answers arrays
  for (var i = 0; i < total; i++) {
    if (questions[i] == answers[i]) {
      points = points + 2; //Increment the score by 2 for every correct answer given
      alert(points);
      highlightAnswerWithClass(i + 2, questions[i], "correct");
    } else {
      points = points - 1;
      alert(points);
      highlightAnswerWithClass(i + 2, questions[i], "incorrect");
      highlightAnswerWithClass(i + 2, answers[i], "correct");
    }
  }

  //CSS for questions

  if (points >= 4) {
    document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
  } else {
    document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
  }

  var q = document.getElementById("p");

  q.style.fontSize = "40px";
  q.style.textAlign = "center";
  q.innerHTML =
    "You got " +
    points +
    " out of " +
    total +
    "<br />" +
    "you used " +
    (29 - Math.floor(total_seconds)) +
    " seconds";

  return false;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body bgcolor="lightblue">
  <div id="quiz-time-left"></div>
  <form name="form" id="questions" onsubmit="return false;">
    <h3>1. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q1" value="a" />a. 1<br />
    <input type="radio" name="q1" value="b" />b. 2<br />
    <input type="radio" name="q1" value="c" />c. 3<br />
    <input type="radio" name="q1" value="d" />d. 4<br />

    <h3>2. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q2" value="a" />a. 1<br />
    <input type="radio" name="q2" value="b" />b. 2<br />
    <input type="radio" name="q2" value="c" />c. 3<br />
    <input type="radio" name="q2" value="d" />d. 4<br />

    <h3>3. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q3" value="a" />a. 1<br />
    <input type="radio" name="q3" value="b" />b. 2<br />
    <input type="radio" name="q3" value="c" />c. 3<br />
    <input type="radio" name="q3" value="d" />d. 4<br />

    <h3>4. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q4" value="a" />a. 1<br />
    <input type="radio" name="q4" value="b" />b. 2<br />
    <input type="radio" name="q4" value="c" />c. 3<br />
    <input type="radio" name="q4" value="d" />d. 4<br />

    <h3>5. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q5" value="a" />a. 1<br />
    <input type="radio" name="q5" value="b" />b. 2<br />
    <input type="radio" name="q5" value="c" />c. 3<br />
    <input type="radio" name="q5" value="d" />d. 4<br />

    <h3>6. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q6" value="a" />a. 1<br />
    <input type="radio" name="q6" value="b" />b. 2<br />
    <input type="radio" name="q6" value="c" />c. 3<br />
    <input type="radio" name="q6" value="d" />d. 4<br />

    <br />
    <input type="submit" id="sendA" value="Submit" onclick="score();" />
    <br />
    <p id="p"></p>
  </form>

</body>

</html>

Answer 1

您应该将值包装为标签值，并使用nextSibling设置标签颜色。

我更新了所有正确答案。

answers[index].nextSibling.style.backgroundColor = "red";

var total_seconds = 30 * 1;
      var c_minutes = parseInt(total_seconds / 60);
      var c_seconds = parseInt(total_seconds % 60);
      var timer;

      function CheckTime() {
        document.getElementById("quiz-time-left").innerHTML =
          "Time Left: " + c_minutes + " minutes " + c_seconds + " seconds ";

        if (total_seconds <= 0) {
          score();
        } else {
          total_seconds = total_seconds - 1;
          c_minutes = parseInt(total_seconds / 60);
          c_seconds = parseInt(total_seconds % 60);
          timer = setTimeout(CheckTime, 1000);
        }
      }
      timer = setTimeout(CheckTime, 1000);

      function highlightAnswerWithClass(question, answer, className) {
        var answers = document.forms.form['q'+question];
		if(answers == undefined) return;
        for (var index = 0; index < answers.length; index++) {
          if (answers[index] != null && answers[index].value === answer) {
            answers[index].classList.add(className);
			if(answers[index].nextSibling.style != undefined) answers[index].nextSibling.style.backgroundColor = "red";
          }
        }
      }

      function score() {
        // stop timer
        clearInterval(timer);

        //Referencing the value of the questions
        var q1 = document.forms.form.q1.value;
        var q2 = document.forms.form.q2.value;
        var q3 = document.forms.form.q3.value;
        var q4 = document.forms.form.q4.value;
        var q5 = document.forms.form.q5.value;
        var q6 = document.forms.form.q6.value;

        // disable form
        var elements = document.getElementById("questions").elements;
        for (var i = 0, len = elements.length; i < len; ++i) {
          elements[i].disabled = true;
        }

        //Array for the questions
        var questions = [q1, q2, q3, q4, q5, q6];

        //Answers for each question
        var answers = ["b", "b", "b", "b", "b", "b"];

        //variable to keep track of the points
        var points = 0;
        var total = 6;
        //max score

        //Making use of a for loop to iterate over the questions and answers arrays
        for (var i = 0; i < total; i++) {
          if (questions[i] == answers[i]) {
            points = points + 2; //Increment the score by 2 for every correct answer given
			//alert(points);
            highlightAnswerWithClass(i + 1, questions[i], "correct");
          } else {
		  points = points - 1;
		  //alert(points);
            highlightAnswerWithClass(i + 1, questions[i], "incorrect");
            highlightAnswerWithClass(i + 1, answers[i], "correct");
          }
        }

        //CSS for questions

        if (points >= 4) {
          document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
        } else { 
          document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
        }

        var q = document.getElementById("p");

        q.style.fontSize = "40px";
        q.style.textAlign = "center";
        q.innerHTML =
          "You got " +
          points +
          " out of " +
          total +
          "<br />" +
          "you used " +
          (29 - Math.floor(total_seconds)) +
          " seconds";

        return false;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
	<style>
	.correct{
		border: 1px solid red;
		background-color:red;
	}
	</style>
  </head>
  <body bgcolor="lightblue">
    <div id="quiz-time-left"></div>
    <form name="form" id="questions" onsubmit="return false;">
      <h3>1. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q1" value="a" />a. 1<br />
      <input type="radio" name="q1" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q1" value="c" />c. 3<br />
      <input type="radio" name="q1" value="d" />d. 4<br />

      <h3>2. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q2" value="a" />a. 1<br />
      <input type="radio" name="q2" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q2" value="c" />c. 3<br />
      <input type="radio" name="q2" value="d" />d. 4<br />

      <h3>3. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q3" value="a" />a. 1<br />
      <input type="radio" name="q3" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q3" value="c" />c. 3<br />
      <input type="radio" name="q3" value="d" />d. 4<br />

      <h3>4. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q4" value="a" />a. 1<br />
      <input type="radio" name="q4" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q4" value="c" />c. 3<br />
      <input type="radio" name="q4" value="d" />d. 4<br />

      <h3>5. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q5" value="a" />a. 1<br />
      <input type="radio" name="q5" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q5" value="c" />c. 3<br />
      <input type="radio" name="q5" value="d" />d. 4<br />

      <h3>6. How many yellow cards equal a red card in football?</h3>
      <input type="radio" name="q6" value="a" />a. 1<br />
      <input type="radio" name="q6" value="b" /><label>b. 2</label><br />
      <input type="radio" name="q6" value="c" />c. 3<br />
      <input type="radio" name="q6" value="d" />d. 4<br />

      <br />
      <input type="submit" id="sendA" value="Submit" onclick="score();" />
      <br />
      <p id="p"></p>
    </form>

  </body>
</html>

Answer 2

好，所以我运行了代码段，这是控制台中的错误：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.title) {
        // your code here...
    }
}

错误出现在第132行和第25列。

因此，我认为您应该在询问堆栈溢出之前检查代码，而不仅仅是将整个代码粘贴到此处。取出您认为有问题的零件，然后询问我们。

在这里，我取出了我认为有错误的代码。祝你好运！

Error: {
  "message": "Uncaught ReferenceError: Invalid left-hand side expression in prefix operation",
  "filename": "https://stacksnippets.net/js",
  "lineno": 132,
  "colno": 25
}

Answer 3

您在answers中的highlightAnswerWithClass中建立索引是不正确的。 answers是格式为所有输入的数组，未按问题分组。由于每个问题都有4个可能的答案，因此特定问题的答案索引为question*4至question*4+3。

我不确定为什么在调用该函数时为什么要在问题编号上加2。

我更改了HTML，以在每个答案的文本周围加一个跨度。然后，我使用CSS更改颜色的背景。

var total_seconds = 30 * 1;
var c_minutes = parseInt(total_seconds / 60);
var c_seconds = parseInt(total_seconds % 60);
var timer;

function CheckTime() {
  document.getElementById("quiz-time-left").innerHTML =
    "Time Left: " + c_minutes + " minutes " + c_seconds + " seconds ";

  if (total_seconds <= 0) {
    score();
  } else {
    total_seconds = total_seconds - 1;
    c_minutes = parseInt(total_seconds / 60);
    c_seconds = parseInt(total_seconds % 60);
    timer = setTimeout(CheckTime, 1000);
  }
}
timer = setTimeout(CheckTime, 1000);

function highlightAnswerWithClass(question, answer, className) {
  var answers = document.forms.form;
  for (var index = question*4; index < question*4 + 4; index++) {
    if (answers[index].value === answer) {
      answers[index].classList.add(className);
    }
  }
}

function score() {
  // stop timer
  clearInterval(timer);

  //Referencing the value of the questions
  var q1 = document.forms.form.q1.value;
  var q2 = document.forms.form.q2.value;
  var q3 = document.forms.form.q3.value;
  var q4 = document.forms.form.q4.value;
  var q5 = document.forms.form.q5.value;
  var q6 = document.forms.form.q6.value;

  // disable form
  var elements = document.getElementById("questions").elements;
  for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = true;
  }

  //Array for the questions
  var questions = [q1, q2, q3, q4, q5, q6];

  //Answers for each question
  var answers = ["b", "b", "b", "b", "b", "b"];

  //variable to keep track of the points
  var points = 0;
  var total = 6;
  //max score

  //Making use of a for loop to iterate over the questions and answers arrays
  for (var i = 0; i < total; i++) {
    
    if (questions[i] == answers[i]) {
      points = points + 2; //Increment the score by 2 for every correct answer given
      highlightAnswerWithClass(i, questions[i], "correct");
    } else {
      points = points - 1;
      highlightAnswerWithClass(i, questions[i], "incorrect");
      highlightAnswerWithClass(i, answers[i], "correct");
    }
  }

  //CSS for questions

  if (points >= 4) {
    document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
  } else {
    document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
  }

  var q = document.getElementById("p");

  q.style.fontSize = "40px";
  q.style.textAlign = "center";
  q.innerHTML =
    "You got " +
    points +
    " out of " +
    total +
    "<br />" +
    "you used " +
    (29 - Math.floor(total_seconds)) +
    " seconds";

  return false;
}

.correct + span {
  background-color: green;
}

.incorrect + span {
  background-color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body bgcolor="lightblue">
  <div id="quiz-time-left"></div>
  <form name="form" id="questions" onsubmit="return false;">
    <h3>1. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q1" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q1" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q1" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q1" value="d" /><span>d. 4</span><br />

    <h3>2. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q2" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q2" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q2" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q2" value="d" /><span>d. 4</span><br />

    <h3>3. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q3" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q3" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q3" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q3" value="d" /><span>d. 4</span><br />

    <h3>4. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q4" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q4" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q4" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q4" value="d" /><span>d. 4</span><br />

    <h3>5. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q5" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q5" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q5" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q5" value="d" /><span>d. 4</span><br />

    <h3>6. How many yellow cards equal a red card in football?</h3>
    <input type="radio" name="q6" value="a" /><span>a. 1</span><br />
    <input type="radio" name="q6" value="b" /><span>b. 2</span><br />
    <input type="radio" name="q6" value="c" /><span>c. 3</span><br />
    <input type="radio" name="q6" value="d" /><span>d. 4</span><br />

<span>    </span><br />
    <input type="submit" id="sendA" value="Submit" onclick="score();" />
    <br />
    <p id="p"></p>
  </form>

</body>

</html>

如何在javascript测验末尾显示/指示对与错的答案

3 个答案: