javascript 测验：将原来一次出现的所有问题都出现在测验结束时

Question

我有一个 javascript 测验，我知道如何让问题一次出现一个。

我需要帮助让所有问题在用户点击“检查答案”后再次出现。这样用户就可以看到所有的问题并得到关于他们是否被正确回答的反馈。现在用户只能看到总分和最后一题。

问题显示为 html 个单选按钮，而不是 javascript 个数组，因为真正的测验将包括每个问题的阅读文本和音频文件。我想一次一个地展示问题，因为真正的测验会有 40 个问题，如果它们都出现在同一页上，那将是压倒性的。

任何 help/ideas 将不胜感激！

css

body{

    font-family: arial;
    text-align: justify;
    margin: 25px;
}
#check{
    font-family:arial;
    font-size: 14px;
    background-color: #C0C0C0;
    color: #000000;
    border: 1px solid black;
    cursor: pointer;
    
}
#next{
    font-family:arial;
    font-size: 14px;
    background-color: #C0C0C0;
    color: #000000;
    border: 1px solid black;
    cursor: pointer;
    
}
#check:hover{
    background-color: #C0C0C0;
}
#next:hover{
    background-color: #C0C0C0;
}

javascript:

function validate() {
 
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 questions = [q1, q2, q3, q4];

  var answers = ["a", "c", "c", "b"];


  var points = 0;
  var total = 4;


  for (var i = 0; i < total; i++) {
    
    if (questions[i] == answers[i]) {
      points = points + 1;
          
    } 
    
   if (q1 == "a") {
      document.getElementById("text1a").style.color="GREEN";
     
    }
    if (q1 == "b") {
      document.getElementById("text1b").style.color="RED";
     
    }
     if (q1 == "c") {
      document.getElementById("text1c").style.color="RED";
     
    }
      if (q2 == "a") {
      document.getElementById("text2a").style.color="RED";
     
    }
    if (q2 == "b") {
      document.getElementById("text2b").style.color="RED";
     
    }
     if (q2 == "c") {
      document.getElementById("text2c").style.color="GREEN";
     
    }
      if (q3 == "a") {
      document.getElementById("text3a").style.color="RED";
     
    }
    if (q3 == "b") {
      document.getElementById("text3b").style.color="RED";
     
    }
     if (q3 == "c") {
      document.getElementById("text3c").style.color="GREEN";
     
    }
    if (q4 == "a") {
      document.getElementById("text4a").style.color="RED";
     
    }
    if (q4 == "b") {
      document.getElementById("text4b").style.color="GREEN";
     
    }
     if (q4 == "c") {
      document.getElementById("text4c").style.color="RED";
     
    }
      }

 

 

  var q = document.getElementById("p");

  q.style.fontSize = "14px";
  q.style.textAlign = "left";
  q.innerHTML =
    
    points +
    " out of " +
    total +
    "<br />"

  return false;
}
function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var sixtyMinutes = 60 * 60,
        display = document.querySelector('#time');
    startTimer(sixtyMinutes, display);
};


function nextQ(){
   var  blockFound = 0;
   var lastQuestion = 0;
   var divs = document.getElementsByTagName("div");
   for(var i = 0; i < divs.length; i++){
   if ( blockFound == 1){
    blockFound = 0;
    divs[i].style.display = 'block'; 
    }else if ( divs[i].style.display == 'block' ){
    if ( i + 2 == divs.length){
        lastQuestion = 1;
    }
    blockFound = 1;
   divs[i].style.display = 'none'; 
   }
 }
if ( lastQuestion == 1){
    document.getElementById('next').style.visibility = 'hidden';  
   }  
 }

html:

<!DOCTYPE html>
<title>Reading Practice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<link rel="stylesheet" href="test.css">
<script type="text/javascript" src="test.js">
</script>
</head>

<body>
 <div><p style="color:#ff4b0d; font-size:30px">Time left: <span id="time">60:00</span></p></div>
 <br>
 <br>
<form name="form" id="questions" onsubmit="return false;">
<div id="q0" style="display:block">

1. Where is Mt. Everest? <BR><BR>

    <input type="radio" name="q1" value="a" id="1a" class="1a"><span id="text1a"><label for="1a"> A Nepal</label></span><br>
    <input type="radio" name="q1" value="b" id="1b" class="1b"><span id="text1b"><label for="1b"> B China</label></span><br>
    <input type="radio" name="q1" value="c" id="1c" class="1c"><span id="text1c"><label for="1c"> C India</label></span><br>
     <br>

</div>
<div id="q1"  style="display:none">

2. What is the second largest country in the world (by area)? <BR><BR>

    <input type="radio" name="q2" value="a" id="2a" class="2a"><span id="text2a"><label for="2a"> A China</label></span><br>
    <input type="radio" name="q2" value="b" id="2b" class="2b"><span id="text2b"><label for="2b"> B Russia</label></span><br>
    <input type="radio" name="q2" value="c" id="2c" class="2c"><span id="text2c"><label for="2c"> C Canada</label></span><br>
     <br>
   
</div>
<div id="q2"  style="display:none">

3. How many times have the Olympic Games been cancelled? <BR><BR>

    <input type="radio" name="q3" value="a" id="3a" class="3a"><span id="text3a"><label for="3a"> A one</label></span><br>
    <input type="radio" name="q3" value="b" id="3b" class="3b"><span id="text3b"><label for="3b"> B two</label></span><br>
    <input type="radio" name="q3" value="c" id="3c" class="3c"><span id="text3c"><label for="3c"> C three</label></span><br>
<br>

</div>
<div id="q3"  style="display:none">
4. How many colours are in a rainbow? <BR><BR>

    <input type="radio" name="q4" value="a" id="4a" class="4a"><span id="text4a"><label for="4a"> A five</label></span><br>
    <input type="radio" name="q4" value="b" id="4b" class="4b"><span id="text4b"><label for="4b"> B seven</label></span><br>
    <input type="radio" name="q4" value="c" id="4c" class="4c"><span id="text4c"><label for="4c"> C nine</label></span><br>
         <br>
 <input type="submit" id="check" value="check answer" onclick="validate();" />
 <p id="p"></p>
 </div>
<button id="next" onclick="nextQ()">Next Question</button>

</form>
</body>

</html>

Answer 1

您需要做的就是在 validate 函数的末尾添加以下内容（但在 return 之前——您实际上可以将其删除）：

const divs = document.getElementsByTagName('div') 
    
for (const div of divs) {
  div.style.display = 'block'
  div.style.visibility = 'visible'
}

如果你想让它更简洁，你可以解构 style 属性：

const divs = document.getElementsByTagName('div') 
    
for (const {style} of divs) {
  style.display = 'block'
  style.visibility = 'visible'
}

javascript 测验：将原来一次出现的所有问题都出现在测验结束时

javascript quiz: make all questions, which originally appeared one at a time, appear at end of quiz

javascript

submit

show

hidden