如何實現線上答題中的答題錯誤提示功能

如何實現線上答案中的答題錯誤提示功能

線上答案已成為現代教育的重要組成部分，透過網路科技實現對學生的測驗和考試。而即使在選擇題中，學生仍然有可能做錯題。為了幫助學生更好地理解和糾正錯誤，我們可以利用程式設計技術添加一個答題錯誤提示功能。本文將介紹如何使用HTML、CSS和JavaScript來實現此功能，並提供具體的程式碼範例。

首先，我們需要一個HTML表單來展示主題和選項，並為每個選項新增一個事件監聽器，以便在學生作答時觸發錯誤提示。以下是一個簡單的HTML結構範例：

<form>
  <p>1. 以下哪个不是一种编程语言？</p>
  <input type="radio" name="question1" value="A"> A. HTML<br>
  <input type="radio" name="question1" value="B"> B. CSS<br>
  <input type="radio" name="question1" value="C"> C. JavaScript<br>
  <input type="radio" name="question1" value="D"> D. SQL<br>
  <button type="submit">提交</button>
</form>

接下來，我們可以使用CSS樣式來定義錯誤提示的外觀和動畫效果，以吸引學生的注意力。下面的CSS程式碼範例展示如何為錯誤提示新增一個紅色的邊框，並實作一個簡單的淡入淡出動畫：

.error {
  border: 2px solid red;
  animation: fade 1s infinite;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

在JavaScript中，我們可以為提交按鈕新增一個點擊事件監聽器，以便點擊提交按鈕時檢查學生的答案，並根據結果來新增或移除錯誤提示。

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为

  var selectedOption = document.querySelector('input[name="question1"]:checked');

  if (selectedOption === null || selectedOption.value !== 'A') {
    selectedOption.parentElement.classList.add('error');
  } else {
    selectedOption.parentElement.classList.remove('error');
  }
});

在上述程式碼中，我們先透過querySelector方法找到選擇題的父級元素，並為其新增或移除error類，從而觸發CSS中定義的錯誤提示效果。答案是否正確是透過檢查所選取的選項的值來判斷的。

綜上所述，透過使用HTML、CSS和JavaScript，我們可以輕鬆實現線上答案中的答案錯誤提示功能。以上提供的程式碼範例可以作為起點，可以根據需要進行修改和擴展，以適應不同的題目和答案驗證邏輯。希望本文對您實現這項功能有所幫助！

以上是如何實現線上答題中的答題錯誤提示功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！