如何解决javascript quiz：让原本一次出现一个的所有问题都出现在测验结束时
我有一个 javascript 测验，我知道如何让问题一次出现一个。
一旦用户点击“检查答案”，我需要帮助让所有问题再次出现。这样用户就可以看到所有的问题，并获得有关是否正确回答的反馈。现在用户只看到总分和最终问题。
问题显示为 html 单选按钮，而不是 javascript 数组，因为真正的测验将包括阅读每个问题的文本和音频文件。我想一次显示一个问题，因为真正的测验将有 40 个问题，如果它们都出现在同一页面上，这将是压倒性的。
任何帮助/想法将不胜感激！
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","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>
解决方法
您需要做的就是在 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'
}
属性：
{{1}}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。