如何在没有弹出窗口的情况下将测验测试分数作为文本

Question

我想在我的博客中实施在线测验。在用户点击查看结果后选择所有选项后，下面是我的代码，它将结果分数显示为弹出窗口。

但我希望在表单中显示文本结果，如下图所示。

＆＃13;

＆＃13;

var answers = ["A","C","B"], 
    tot = answers.length;

function getCheckedValue( radioName ){
    var radios = document.getElementsByName( radioName ); // Get radio group by-name
    for(var y=0; y<radios.length; y++)
      if(radios[y].checked) return radios[y].value; // return the checked value
}

function getScore(){
  var score = 0;
  for (var i=0; i<tot; i++)
    if(getCheckedValue("question"+i)===answers[i]) score += 1; // increment only
  return score;
}

function returnScore(){
  alert("Your score is "+ getScore() +"/"+ tot);
}

＆＃13;

<ul>
  <li>
    <h3>How many letters are there in "ZZ"?</h3>
    <input type="radio" name="question0" value="A">2<br>
    <input type="radio" name="question0" value="B">1<br>
    <input type="radio" name="question0" value="C">3<br>
    <input type="radio" name="question0" value="D">4<br>
  </li>
  <li>
    <h3>How many letters are there in "ZZX"?</h3>
    <input type="radio" name="question1" value="A">2<br>
    <input type="radio" name="question1" value="B">1<br>
    <input type="radio" name="question1" value="C">3<br>
    <input type="radio" name="question1" value="D">4<br>
  </li>
  <li>
    <h3>How many letters are there in "V"?</h3>
    <input type="radio" name="question2" value="A">2<br>
    <input type="radio" name="question2" value="B">1<br>
    <input type="radio" name="question2" value="C">3<br>
    <input type="radio" name="question2" value="D">4<br>
  </li>
</ul>

<button onclick="returnScore()">View Results</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要在DOM中设置一个位置才能获得分数。

<div id="show-score"></div>

然后使用returnScore函数将结果放在那里而不是警告。

function returnScore(){
    document.getElementById('show-score').innerHTML = 
       "Your score is "+ getScore() +"/"+ tot;
}

请参阅小提琴：https://jsfiddle.net/7Ly00p2z/