如何使用 Javascript 创建数学测验
我必须为学校项目创建一个数学测验。我已经创建了问题和答案。我只是不知道如何让他们一次显示一个问题。当你回答问题时，我必须一一展示。
我还需要使用不同类型的问题，例如多项选择、带有叙述反应的问题、带有图像选择的问题、填空等。
所以我需要帮助，一次显示一个问题，显示记分牌，在下一个问题出现之前向用户显示他们的问题是对还是错，如果他们至少得到 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>
BIG阳2回答
-
Cats萌萌
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
有几种方法可以做到这一点。使用 js 和 css，您可以display: block;将每个问题的元素的值更改为hidden，block每当用户必须回答问题时将它们更改回－ 一个是block，而其他的都应该隐藏。要做到这一点，请尝试使用document.getElementsByID("myDiv1").style.display = "hidden";和document.getElementsByID("myDiv2").style.display = "block";分别地，myDiv1您想要环绕应该隐藏的问题的 div 示例和myDiv2环绕当前问题的 div的示例在哪里。有关如何执行此操作的更多信息，请查看w3schools 样式显示属性参考。
随时随地看视频慕课网APP
相关分类
JavaScript