我必须为学校元素创建数学测验。我已经创建了问题和答案。我只是不知道如何让他们一次显示一个问题。我必须在您回答问题时一一展示。
我还需要使用不同类型的问题，例如多项选择题、叙述性回答问题、图像选择问题、填空题等。
所以我需要帮助来一次显示一个问题，显示记分板，在下一个问题出现之前向用户显示他们是否答对了问题，如果他们至少达到 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];
}
最佳答案
有几种方法可以做到这一点。使用 js 和 css，您可以将每个问题的元素 display: block; 的值更改为 hidden，并在任何时候将它们更改回 block用户必须回答问题 - 当一个被阻止时，所有其他的都应该被隐藏。
为此尝试使用
document.getElementsByID("myDiv1").style.display = "hidden";
和
document.getElementsByID("myDiv2").style.display = "block";
分别地，myDiv1 是一个 div 的示例，您将要环绕应该隐藏的问题，myDiv2 是环绕当前问题的 div。
有关如何执行此操作的更多信息，请查看 w3schools Style display Property reference .
关于javascript - 如何使用 Javascript 创建数学测验，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58363967/