我必须为学校项目创建一个数学测验。我已经创建了问题和答案。我只是不知道如何让他们一次显示一个问题。当你回答问题时，我必须一一展示。我还需要使用不同类型的问题，例如多项选择、带有叙述反应的问题、带有图像选择的问题、填空等。所以我需要帮助，一次显示一个问题，显示记分牌，在下一个问题出现之前向用户显示他们的问题是对还是错，如果他们至少得到 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>
2 回答
Cats萌萌
TA贡献1805条经验 获得超9个赞
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>
PS 使用onload属性start()在页面加载后立即运行。
慕的地6264312
TA贡献1817条经验 获得超6个赞
有几种方法可以做到这一点。使用 js 和 css，您可以display: block;将每个问题的元素的值更改为hidden，block每当用户必须回答问题时将它们更改回－ 一个是block，而其他的都应该隐藏。
要做到这一点，请尝试使用
document.getElementsByID("myDiv1").style.display = "hidden";
和
document.getElementsByID("myDiv2").style.display = "block";
分别地，myDiv1您想要环绕应该隐藏的问题的 div 示例和myDiv2环绕当前问题的 div的示例在哪里。
有关如何执行此操作的更多信息，请查看w3schools 样式显示属性参考。
添加回答
举报
0/150
提交
取消