我正在使用JavaScript,CSS和HTML创建数学测验。
我需要向用户显示一条消息,告诉他们答案是对还是错,然后再继续下一个问题。我将其用于问题1,这是一个文本输入问题。对于第二个问题,这是一个选择题,我不知道该怎么做。
function myAnswer1() {
let question1 = document.querySelector("#textbox").value;
if (question1 == 4) {
alert("You are correct!");
} else {
alert("Wrong answer!");
}
}
function myAnswer2() {
let question2 = document.querySelector("#mc1").value;
if (question2 == 9) {
alert("You are correct!");
} else {
alert("Wrong answer!");
}
}
function myFunction1() {
document.getElementById("q1").style.display = "block";
}
function myFunction2() {
document.getElementById("q2").style.display = "block";
document.getElementById("q1").style.display = "none";
}
<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" />
</div>
<input type="button" onclick="myFunction1()" value="Start Question 1" />
<div id="q2">
<p class="questions">2) What is 3 to the power of 2?</p>
<input type="radio" id="mc1" name="question2" value="9" />9<br />
<input type="radio" id="mc2" name="question2" value="6" />6<br />
<input type="radio" id="mc3" name="question2" value="3" />3<br />
<input type="button" onclick="myAnswer2()" value="Submit Answer" />
</div>
<input type="button" onclick="myFunction2()" value="Start Question 2" />
</form>
答案 0 :(得分:0)
替换此:
let question2 = document.querySelector("#mc1").value;
与此:
let question2 = document.querySelector('input[name="question2"]:checked').value;
玩得开心!