如何在测验结束后获得相同的结果而不单击“结果”按钮？
这是我尝试过的：
if (currentQuestion == totalQuestions) {
var outputDiv = document.getElementById("quizEnds");
outputDiv.innerHTML = "You have reached the final question.";
$('#next').remove();
getScore(this.form);
}
它不起作用。有人可以指出错误吗？它必须是两个单独的文件。谢谢
//quizeffect.js
var totalQuestions = $('.questions').size();
var currentQuestion = 0;
$questions = $('.questions');
$questions.hide();
$($questions.get(currentQuestion)).fadeIn();
$('#next').click(function () {
$($questions.get(currentQuestion)).fadeOut(function () {
currentQuestion = currentQuestion + 1;
if (currentQuestion == totalQuestions) {
var outputDiv = document.getElementById("quizEnds");
outputDiv.innerHTML = "<h2>You have reached the final question.</h2>";
$('#next').remove();
getScore(this.form);
} else {
$($questions.get(currentQuestion)).fadeIn();
}
});
});
//tlcquizzapp.js
/*====================app js====================*/
var numberOfQuestions = 6;
// Insert number of choices in each question
var numberOfChoices = 4;
var rightAnswers = 0;
var correct = [];
var wrong =[];
var answers = new Array("Double Parking",
"The applicant will have the application denied", "Never", "All of the above",
"Yellow taxi medallion base", "You are allowed to pick up in the crosswalk if the passenger is standing at the intersection");
function print(message) {
var outputDiv = document.getElementById("output");
outputDiv.innerHTML = message;
}
function buildList(arr) {
var listHTML = '<ol>';
for (var i = 0; i < arr.length; i++) {
listHTML += '<li>' + arr[i] + '</li>';
}
listHTML += '</ol>';
return listHTML;
}
// Do not change anything below here ...
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < numberOfQuestions; i++) {
currElt = i * numberOfChoices;
for (j = 0; j < numberOfChoices; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
correct.push(currSelection.value);
}
else{
wrong.push(currSelection.value);
}
}
}
}
score = Math.round(score/numberOfQuestions*100);
var userAnswers = '<p>You got ' + score + ' % on your test.</p>';
userAnswers += '<h2>You got these answers correct:</h2>';
userAnswers += buildList(correct);
userAnswers += '<h2>You got these answers wrong</h2>';
userAnswers += buildList(wrong);
print(userAnswers);
}.questions p{
font-size: 24px;
background-color: #3399FF;
color: #FFF;
padding: 20px;
}
.options li{
font-size: 18px;
}
form {
width: 80%;
margin: 0 auto;
border: 1px solid #DDD;
}
button {
border: none;
padding: 10px;
border-radius: 10px;
background-color: #3399FF;
color: #FFF;
}
button:hover {
background-color: orange;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TLC Driver Practice Quiz</title>
<link rel="stylesheet" href="css/tlc-style.css">
</head>
<body>
<div><h1>TLC Practice Quiz</h1></div>
<form>
<div class="questions">
<p>1. Which of the following is not a moving violation?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q1" value="Double Parking">Double Parking</li>
<li><input class="option" type="radio" name="q1" value="Tailgating">Tailgating</li>
<li><input class="option" type="radio" name="q1" value="Speeding">Speeding</li>
<li><input class="option" type="radio" name="q1" value="Failing to signal a turn">Failing to signal a turn</li>
</ol>
</div>
<div class="questions">
<p>2. What is the penalty for an applicant of an TLC driver's license who test positive for drugs and fails the drug test?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q2" value="The applicant must take the test again">The applicant must take the test again</li>
<li><input class="option" type="radio" name="q2" value="The applicant will have a probationary license">The applicant will have a probationary license</li><li><input class="option" type="radio" name="q2" value="The applicant will have the application denied">The applicant will have the application denied</li>
<li><input class="option" type="radio" name="q2" value="The applicant will have to drive carefully">The applicant will have to drive carefully</li>
</ol>
</div>
<div class="questions">
<p>3. In which situation may you pass a school bus with the red flashing light on?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q3" value="When it is snowing">When it is snowing</li>
<li><input class="option" type="radio" name="q3" value="When you do not see children around">When you do not see children around</li>
<li><input class="option" type="radio" name="q3" value="When someone behind beeps the horn">When someone behind beeps the horn</li>
<li><input class="option" type="radio" name="q3" value="Never">Never<br/>
</ol>
</div>
<div class="questions">
<p>4. Which of the following is a service animal?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q4" value="A seeing eye dog">A seeing eye dog</li>
<li><input class="option" type="radio" name="q4" value="A guide dog">A guide dog</li>
<li><input class="option" type="radio" name="q4" value="A signal dog">A signal dog</li>
<li><input class="option" type="radio" name="q4" value="All of the above">All of the above</li>
</ol>
</div>
<div class="questions">
<p>5. Which of the following is not a For-Hire base?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q5" value="Yellow taxi medallion base">Yellow taxi medallion base</li>
<li><input class="option" type="radio" name="q5" value="Black car base">Black car base</li>
<li><input class="option" type="radio" name="q5" value="Livery car service base station">Livery car service base station</li>
<li><input class="option" type="radio" name="q5" value="Luxury limousine base">Luxury limousine base</li>
</ol>
</div>
<div class="questions">
<p>6. Which of the following is not correct?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q6" value="When you pick up a passenger, the vehicle should be 12 inches from the curb">When you pick up a passenger, the vehicle should be 12 inches from the curb</li>
<li><input class="option" type="radio" name="q6" value="When you pick up a passenger, the vehicle should be parallel to the curb">When you pick up a passenger, the vehicle should be parallel to the curb</li>
<li><input class="option" type="radio" name="q6" value="If the passenger is waiting next to a car that is already parked, you should look for space within 100 ft.">If the passenger is waiting next to a car that is already parked, you should look for space within 100 ft.</li>
<li><input class="option" type="radio" name="q6" value="You are allowed to pick up in the crosswalk if the passenger is standing at the intersection">You are allowed to pick up in the crosswalk if the passenger is standing at the intersection</li>
</ol>
</div>
<div id="quizEnds"></div>
<button type="button" name="nextButton" id='next' value="Next">Next</button>
<button class="results" type="button" value="Results" onClick="getScore(this.form);">Results</button>
<!-- <button type="reset" value="Clear Answers">Clear Answers</button> -->
<div id="output"></div>
</form>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/tlcquizzapp.js"></script>
<script type="text/javascript" src="js/quizeffect.js"></script>
</body>
</html>thisclosest()尝试
getScore($(this).closest('form')[0]);
或更简单，给表单一个 id
<form id="myForm>
并使用该 id 来定位表单
getScore($('#myForm')[0]);
您需要将表单元素传递给
getScore()this.form$questions.get(currentQuestion)).fadeOut()this您可以在变量中保留对表单元素的引用，其中
this$('#next').click(function () {
var form = this.form;
然后在调用时使用它
getScore()getScore(form);
在 jQuery 事件函数中 this 指的是事件所连接到的元素。因此，您需要参考 document.form[0]，或使用相同的 jQuery 版本。