現(xiàn)如今，隨著網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，各種在線測(cè)評(píng)系統(tǒng)已經(jīng)成為教育、人才選拔等領(lǐng)域的重要評(píng)價(jià)工具。而JavaScript作為一種強(qiáng)大的前端開(kāi)發(fā)語(yǔ)言，在答題系統(tǒng)中也得到了廣泛應(yīng)用。
JavaScript的一個(gè)重要特點(diǎn)是，可以在不刷新頁(yè)面的情況下，實(shí)現(xiàn)對(duì)頁(yè)面各個(gè)元素的動(dòng)態(tài)操作。這意味著，在答題系統(tǒng)中，我們可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)題目的呈現(xiàn)、答案的提交、分?jǐn)?shù)的計(jì)算等各種功能。
對(duì)于答題系統(tǒng)來(lái)說(shuō)，最核心的部分當(dāng)然是題目的呈現(xiàn)和答案的判斷。這里我們演示一個(gè)簡(jiǎn)單的代碼，可以在網(wǎng)頁(yè)上呈現(xiàn)一道選擇題，并實(shí)現(xiàn)對(duì)用戶所選答案的判斷：
<!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>這段代碼中，我們首先定義了一個(gè)包含題目、答案和正確答案的數(shù)組，如下所示：
var questions = [
{
question: "What is 2 + 2?",
answers: [
"3",
"4",
"5"
],
correctAnswer: 1
}
];然后，我們通過(guò)loadQuestion()函數(shù)來(lái)呈現(xiàn)當(dāng)前的問(wèn)題和可選答案。該函數(shù)通過(guò)循環(huán)遍歷問(wèn)題數(shù)組中當(dāng)前問(wèn)題所包含的可選答案，并按照HTML標(biāo)準(zhǔn)，用radio按鈕和label標(biāo)簽構(gòu)造出n個(gè)可供選擇的答案，如下所示：
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"));
}
}最后，我們監(jiān)聽(tīng)提交按鈕的點(diǎn)擊事件，并在checkAnswer()函數(shù)中判斷用戶選擇的答案是否正確。如果用戶答對(duì)了，則分?jǐn)?shù)加1，顯示“Correct!”；否則顯示“Wrong!”。接著，如果還有問(wèn)題可供回答，則跳轉(zhuǎn)到下一道題，否則顯示用戶的總分?jǐn)?shù)，如下所示：
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;
}
}
}這樣，我們就通過(guò)JavaScript，構(gòu)建出了一道簡(jiǎn)單的在線答題系統(tǒng)。除了選擇題，我們還可以通過(guò)JavaScript來(lái)構(gòu)造出其他類型的問(wèn)題，比如多選題、填空題、判斷題等。在實(shí)際應(yīng)用中，我們還可以通過(guò)AJAX技術(shù)來(lái)實(shí)現(xiàn)與后端數(shù)據(jù)庫(kù)的聯(lián)動(dòng)，實(shí)現(xiàn)更加復(fù)雜的功能。