現如今，隨著網絡技術的飛速發展，各種在線測評系統已經成為教育、人才選拔等領域的重要評價工具。而JavaScript作為一種強大的前端開發語言，在答題系統中也得到了廣泛應用。
JavaScript的一個重要特點是，可以在不刷新頁面的情況下，實現對頁面各個元素的動態操作。這意味著，在答題系統中，我們可以通過JavaScript來實現題目的呈現、答案的提交、分數的計算等各種功能。
對于答題系統來說，最核心的部分當然是題目的呈現和答案的判斷。這里我們演示一個簡單的代碼，可以在網頁上呈現一道選擇題，并實現對用戶所選答案的判斷：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Quiz</title>
</head>
<body>
<h1>Welcome to the JavaScript Quiz!</h1>
<div id="question"></div>
<div id="answers"></div>
<button onclick="checkAnswer()">Submit</button>
<p id="result"></p>
<script>
var questions = [
{
question: "What is 2 + 2?",
answers: [
"3",
"4",
"5"
],
correctAnswer: 1
}
];
var currentQuestion = 0;
var score = 0;
function loadQuestion() {
var questionEl = document.getElementById("question");
questionEl.textContent = questions[currentQuestion].question;
var answerEl = document.getElementById("answers");
answerEl.innerHTML = "";
for (var i = 0; i < questions[currentQuestion].answers.length; i++) {
var answer = questions[currentQuestion].answers[i];
var radioEl = document.createElement("input");
radioEl.setAttribute("type", "radio");
radioEl.setAttribute("name", "answer");
radioEl.setAttribute("value", i);
var labelEl = document.createElement("label");
labelEl.textContent = answer;
answerEl.appendChild(radioEl);
answerEl.appendChild(labelEl);
answerEl.appendChild(document.createElement("br"));
}
}
function checkAnswer() {
var radios = document.getElementsByName("answer");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
if (parseInt(radios[i].value) === questions[currentQuestion].correctAnswer) {
score++;
document.getElementById("result").textContent = "Correct!";
} else {
document.getElementById("result").textContent = "Wrong!";
}
currentQuestion++;
if (currentQuestion < questions.length) {
loadQuestion();
} else {
var answerEl = document.getElementById("answers");
answerEl.innerHTML = "";
answerEl.textContent = "Your score: " + score + " out of " + questions.length;
}
break;
}
}
}
loadQuestion();
</script>
</body>
</html>這段代碼中，我們首先定義了一個包含題目、答案和正確答案的數組，如下所示：
var questions = [
{
question: "What is 2 + 2?",
answers: [
"3",
"4",
"5"
],
correctAnswer: 1
}
];然后，我們通過loadQuestion()函數來呈現當前的問題和可選答案。該函數通過循環遍歷問題數組中當前問題所包含的可選答案，并按照HTML標準，用radio按鈕和label標簽構造出n個可供選擇的答案，如下所示：
function loadQuestion() {
var questionEl = document.getElementById("question");
questionEl.textContent = questions[currentQuestion].question;
var answerEl = document.getElementById("answers");
answerEl.innerHTML = "";
for (var i = 0; i < questions[currentQuestion].answers.length; i++) {
var answer = questions[currentQuestion].answers[i];
var radioEl = document.createElement("input");
radioEl.setAttribute("type", "radio");
radioEl.setAttribute("name", "answer");
radioEl.setAttribute("value", i);
var labelEl = document.createElement("label");
labelEl.textContent = answer;
answerEl.appendChild(radioEl);
answerEl.appendChild(labelEl);
answerEl.appendChild(document.createElement("br"));
}
}最后，我們監聽提交按鈕的點擊事件，并在checkAnswer()函數中判斷用戶選擇的答案是否正確。如果用戶答對了，則分數加1，顯示“Correct!”；否則顯示“Wrong!”。接著，如果還有問題可供回答，則跳轉到下一道題，否則顯示用戶的總分數，如下所示：
function checkAnswer() {
var radios = document.getElementsByName("answer");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
if (parseInt(radios[i].value) === questions[currentQuestion].correctAnswer) {
score++;
document.getElementById("result").textContent = "Correct!";
} else {
document.getElementById("result").textContent = "Wrong!";
}
currentQuestion++;
if (currentQuestion < questions.length) {
loadQuestion();
} else {
var answerEl = document.getElementById("answers");
answerEl.innerHTML = "";
answerEl.textContent = "Your score: " + score + " out of " + questions.length;
}
break;
}
}
}這樣，我們就通過JavaScript，構建出了一道簡單的在線答題系統。除了選擇題，我們還可以通過JavaScript來構造出其他類型的問題，比如多選題、填空題、判斷題等。在實際應用中，我們還可以通過AJAX技術來實現與后端數據庫的聯動，實現更加復雜的功能。
下一篇div不跟滑動