Question

尝试编写带有4个选项和 x 问题的测验。当前，您单击按钮，它会弹出，然后一个函数删除按钮，然后调用该函数以使用不同的文本重新创建它们。第一个看起来像普通的测验，然后所有格式都消失了。

不同的按钮布局不是故意的，我无法弄清楚为什么顶部的文字消失了（尽管如此）

代码（对HTML中的大众js很抱歉）：

let q = 0;
let ans = [
  ["CompSci", "Maths", "Physics", "Chemistry"],
  ["Javascript", "Ruby", "Python", "C#"],
  ["Easy", "Difficult", "Hard", "Impossible"],
  ["Good", "Bad", "Really bad", "The literal worst"]
];
var questions = [
  ["Favourite lesson", "Language I don't know", "Writing this code", "The quality of this quiz"],
  [2, 4, 4, 4]
];
let count = 0;
var qType;

function setQuestion() {
  document.write("Question Number ", q + 1, );
  document.write('<br>');
  document.write(questions[0][q]);
  var btn = document.createElement("BUTTON"); // Create a <button> element
  var t = document.createTextNode(ans[q][0]); // Create a text node
  btn.appendChild(t); // Append the text to <button>
  document.body.appendChild(btn);
  document.write('<br>');

  var btn2 = document.createElement("BUTTON"); // Create a <button> element
  var t2 = document.createTextNode(ans[q][1]); // Create a text node
  btn2.appendChild(t2); // Append the text to <button>
  document.body.appendChild(btn2);
  document.write('<br>');

  var btn3 = document.createElement("BUTTON"); // Create a <button> element
  var t3 = document.createTextNode(ans[q][2]); // Create a text node
  btn3.appendChild(t3); // Append the text to <button>
  document.body.appendChild(btn3);
  document.write('<br>');

  var btn4 = document.createElement("BUTTON"); // Create a <button> element
  var t4 = document.createTextNode(ans[q][3]); // Create a text node
  btn4.appendChild(t4); // Append the text to <button>
  document.body.appendChild(btn4);

  qType = questions[1][q];
  switch (qType) {
    case 1:
      btn.addEventListener("click", Right);
      btn2.addEventListener("click", Wrong);
      btn3.addEventListener("click", Wrong);
      btn4.addEventListener("click", Wrong);
      break;
    case 2:
      btn.addEventListener("click", Wrong);
      btn2.addEventListener("click", Right);
      btn3.addEventListener("click", Wrong);
      btn4.addEventListener("click", Wrong);
      break;
    case 3:
      btn.addEventListener("click", Wrong);
      btn2.addEventListener("click", Wrong);
      btn3.addEventListener("click", Right);
      btn4.addEventListener("click", Wrong);
      break;
    case 4:
      btn.addEventListener("click", Wrong);
      btn2.addEventListener("click", Wrong);
      btn3.addEventListener("click", Wrong);
      btn4.addEventListener("click", Right);
      break;
    default:
  }

  function Wrong() {
    alert("WRONG!")
    Reset()
  }

  function Right() {
    alert("RIGHT!");
    count++;
    Reset()
  }

  function Reset() {
    btn.remove();
    btn2.remove();
    btn3.remove();
    btn4.remove();
    q = q + 1;
    if (q >= questions[0].length) {
      alert(count.toString() + "/" + (questions[0].length).toString())
    } else {
      setQuestion();
    }
  }
}

setQuestion();

{
  border: 1px dotted black;
}

p.question {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #2E2E2E;
  margin-bottom: 0px;
}

h2.quizHeader {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 25px;
  line-height: 27px;
  margin: 24px 0 12px 0;
  padding: 0 0 4px 0;
  border-bottom: 1px solid #a2a2a2;
}

h2.quizScore {
  font-family: Arial, sans-serif;
  font-size: 25px;
}

label {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #424242;
  vertical-align: top;
}

input.answer[type="radio"] {
  margin-bottom: 10px;
}

.Questions {
  font-family: Arial, sans-serif;
  background-color: antiquewhite;
}

th {}

tr {}

td {}

.hide {
  display: none;
}


/*SFS light red = #c30b0a;
SFS dark red = #9f2026; */

body {
  padding: 20px;
}

<h2 class="quizHeader">Take a Quiz!</h2>

<div class="Questions">

Answer 1

您使用document.write来更改内容。 文档加载后，document.write将覆盖全部内容。

您可以改为更改内部元素的内容，如下所示：

document.getElementById("Questions").innerHTML = questions[0][q];

使用行为异常的循环删除和添加按钮

1 个答案: