JavaScript是一種強大的編程語言，無可否認的，我們可以用JavaScript做許多獨特而且有意義的事情，像是用它構建一個酷炫的題庫或測驗程序。
這種類型的程序是一個使用JavaScript編寫的完美示例。假設我們想為我們的網站或課程提供一個問題和答案的列表，我們可以使用HTML和CSS來使用簡潔的設計來創建一個形式美觀且易于導航的界面。然后，JavaScript可以用來讓我們的應用具有更多的交互性，這使得其使用者更快、更效率地處理存儲在其中的數據。并且，我們可以進一步使用JavaScript來做事情如防止作弊、記錄統計信息等。
<!DOCTYPE html> <html> <head> <title>My Quiz App</title> <meta charset='UTF-8'> <link rel='stylesheet' href='style.css'> <script src='quiz.js'></script> </head> <body> <div id='quiz-container'> <h1>My Quiz App</h1> <div id='intro-container'> <p>Welcome to my quiz app!</p> <button id='start-btn'>Start Quiz</button> </div> <div id='question-container' style='display: none;'> <div id='question'></div> <div id='answer-buttons'></div> </div> <div id='outro-container' style='display: none;'> <p>You got <span id='num-correct'></span> out of <span id='num-questions'></span> questions correct.</p> <button id='restart-btn'>Restart Quiz</button> </div> </div> </body> </html>
我故意使用了一些CSS來裝飾試題框的例子，但HTML代碼不必太過繁瑣。我們需要一個包圍整個應用程序的HTML元素，并嵌套其他元素在其中。在頂級元素內部，你會發現三個或更多的元素如#intro-container、#question-container和#outro-container。這些元素可讓我們在應用程序的不同狀態或頁面之間切換，并根據當前的應用程序狀態適當地顯示和隱藏不同的元素。
JavaScript的更新和動態性質使得它在開發此類應用程序時特別有用。通過為當前的應用程序狀態定義適當的事件處理函數、按鍵綁定和所有其他必需的交互，我們可以做很多事情來確保管理員和普通用戶的數據安全以及界面的易用性。
const quizContainer = document.getElementById('quiz-container')
const introContainer = document.getElementById('intro-container')
const questionContainer = document.getElementById('question-container')
const outroContainer = document.getElementById('outro-container')
const questionElement = document.getElementById('question')
const answerButtonElements = document.getElementById('answer-buttons').querySelectorAll('button')
const numCorrectElement = document.getElementById('num-correct')
const numQuestionsElement = document.getElementById('num-questions')
const startButton = document.getElementById('start-btn')
const restartButton = document.getElementById('restart-btn')
let currentQuestionIndex = 0
let numCorrect = 0
startButton.addEventListener('click', startQuiz)
restartButton.addEventListener('click', startQuiz)
function startQuiz() {
currentQuestionIndex = 0
numCorrect = 0
setNextQuestion()
introContainer.style.display = 'none'
questionContainer.style.display = 'block'
outroContainer.style.display = 'none'
}
function setNextQuestion() {
resetState()
showQuestion(questions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonElements.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonElements.firstChild) {
answerButtonElements.removeChild(answerButtonElements.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonElements.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (selectedButton.dataset.correct) {
numCorrect++
}
if (currentQuestionIndex == questions.length - 1) {
endQuiz()
} else {
currentQuestionIndex++
setNextQuestion()
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
function endQuiz() {
questionContainer.style.display = 'none'
outroContainer.style.display = 'block'
numCorrectElement.innerText = numCorrect
numQuestionsElement.innerText = questions.length
}JavaScript極其適合用于此計劃。函數startQuiz()是游戲的主界面。當用戶點擊“開始問答”按鈕時，它將被執行。在此之后，函數setNextQuestion()會逐個顯示問題。showQuestion()函數是事件的關鍵點，會添加具有適當事件處理程序的新HTML元素（例如試題和下拉菜單）。selectAnswer()函數則識別測驗中的正確答案，并根據選擇的答案是否正確更新結果和得分部分。
總而言之，通過使用JavaScript，我們可以讓我們的測驗應用程序擁有更好、更高級的交互能力。為什么不試試并創建自己的測驗呢？