我必须为一个学校项目创建一个数学测验。我已经创建了问题和答案。我只是不知道如何让他们一次显示一个问题。当您回答每个问题时，我必须一个个显示一个问题。
我还需要使用不同类型的问题，例如多选题，叙述性回答问题，图像选择问题，填空等等。
因此，我需要一次显示一个问题，显示记分板，在下一个问题出现之前向用户显示他们是对还是错的信息，如果他们至少获得80％的通过或失败消息，则需要我的帮助还是不可以，并为用户提供一个选项，让其在最后重新参加测验。
这是我的HTML
<!DOCTYPE html>
<html>
<head>
<title>Math Quiz!</title>
<link href ="quizCSS.css" rel ="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src = "MathQuiz.js" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>Take the Quiz!</h1>
<form id = "quiz" name = "quiz">
<div id="q1">
<p class = "questions">1) What is 2 + 2?</p>
<input id = "textbox" type = "text" name = "question1">
<input type="button" onclick="myAnswer1()" value="Submit Answer">
<script>
var question1 = document.quiz.question1.value;
function myAnswer1() {
if(question1 == 4){
document.write("You are correct!");
}
else{
document.write("Wrong Answer!");
}
}
</script>
</div>
<input type="button" onclick="myFunction1()" value="Start Question 1">
<script>
function myFunction1() {
document.getElementById("q1").style.display = "block";
}
</script>
<div id="q2">
<p class = "questions">2) What is 3 to the power of 2?</p>
<input type = "radio" id = "mc" name = "question2" value = "9"> 9<br>
<input type = "radio" id = "mc" name = "question2" value = "6"> 6<br>
<input type = "radio" id = "mc" name = "question2" value = "3"> 3<br>
</div>
<input type="button" onclick="myFunction2()" value="Start Question 2">
<script>
function myFunction2() {
document.getElementById("q2").style.display = "block";
document.getElementById("q1").style.display = "none";
}
</script>
<div id="q3">
<p class = "questions">3) What is the square root of 25?</p>
<input type = "radio" id = "mc" name = "question3" value = "5"> 5<br>
<input type = "radio" id = "mc" name = "question3" value = "525"> 525<br>
</div>
<input type="button" onclick="myFunction3()" value="Start Question 3">
<script>
function myFunction3() {
document.getElementById("q3").style.display = "block";
document.getElementById("q2").style.display = "none";
}
</script>
<div id="q4">
<p class = "questions">4) What is the square root of 81?</p>
<input type = "radio" id = "mc" name = "question4" value = "9"> 9<br>
<input type = "radio" id = "mc" name = "question4" value = "7"> 7<br>
</div>
<input type="button" onclick="myFunction4()" value="Start Question 4">
<script>
function myFunction4() {
document.getElementById("q4").style.display = "block";
document.getElementById("q3").style.display = "none";
}
</script>
<div id="q5">
<p class = "questions">5) Which shape has a right angle?</p>
<input type = "image" id = "pic" name = "question5" value = img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Blue_Square.svg" width="100" height="100"><br>
<input type = "image" id = "pic" name = "question5" value = img src="https://upload.wikimedia.org/wikipedia/commons/7/7f/Green_equilateral_triangle_point_up.svg" width="100" height="100"><br>
<input type = "image" id = "pic" name = "question5" value = img src="https://www.publicdomainpictures.net/pictures/310000/velka/red-circle.png" width="100" height="100"><br>
</div>
<input type="button" onclick="myFunction5()" value="Start Question 5">
<script>
function myFunction5() {
document.getElementById("q5").style.display = "block";
document.getElementById("q4").style.display = "none";
}
</script>
<input id = "button" type = "button" value = "I'm finished!" onclick = "check();">
</form>
<div id = "after_submit">
<p id = "number_correct"></p>
<p id = "message"></p>
<img id = "picture">
</div>
<script src = "MathQuiz.js" defer></script>
</body>
</html>
这是我的Javascript
function check(){
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var question4 = document.quiz.question4.value;
var question5 = document.quiz.question5.value;
var correct = 0;
if (question1 == "4") {
correct++;
}
if (question2 == "9") {
correct++;
}
if (question3 == "5") {
correct++;
}
if (question4 == "9") {
correct++;
}
if (question5 == "https://upload.wikimedia.org/wikipedia/commons/8/82/Blue_Square.svg") {
correct++;
}
var pictures = ["img/win.gif", "img/meh.jpeg", "img/lose.gif"];
var messages = ["You pass the quiz", "You fail the quiz"];
var score;
if (correct == 0) {
score = 4;
}
if (correct > 0 && correct < 3) {
score = 3;
}
if (correct == 3) {
score = 2;
}
if (correct == 4) {
score = 1;
}
if (correct == 5) {
score = 0;
}
document.getElementById("after_submit").style.visibility = "visible";
document.getElementById("message").innerHTML = messages[score];
document.getElementById("number_correct").innerHTML = "You got " + correct + " correct.";
document.getElementById("picture").src = pictures[score];
}
答案 0 :(得分：0)
有几种方法可以执行此操作。使用js和CSS，您可以将每个问题的元素display: block;的值更改为hidden，并在用户必须回答问题时将其更改回block-其中一个是{ {1}}，其他所有内容都应隐藏。
为此，请尝试使用
block
和
document.getElementsByID("myDiv1").style.display = "hidden";
分别是document.getElementsByID("myDiv2").style.display = "block";是div的一个示例，您将要包装应该隐藏的问题，而myDiv1则是将当前问题包装的div。
有关如何执行此操作的更多信息，请选中w3schools Style display Property reference。
答案 1 :(得分：0)
抢救jQuery！
只需使用$("#id").show()和hide()：
var q = 1; //question #
function start() {
$("#q2").hide();
$("#q3").hide();
//add more for more questions
}
function nextQ() {
q++;
update();
}
function update() {
//hide all
$("#q1").hide();
$("#q2").hide();
$("#q3").hide();
//show next Q
$("#q"+q).show();
}
HTML 代码段：
<button onclick="start();">Start</button>
<div id="q1">
<!-- question -->
1
<button onclick="nextQ();">Next</button>
</div>
<div id="q2">
<!-- question -->
2
<button onclick="nextQ();">Next</button>
</div>
<div id="q3">
<!-- question -->
3
<button onclick="nextQ();">Next</button>
</div>
P.S。页面加载后，请使用onload属性运行start()。