Javascript測驗驗證

我的大腦已經完全空白。我有我做的3個問題測驗的佈局。我只是不知道我需要使用的JavaScript代碼。一旦提交測驗，它需要驗證所有問題都有答案（我不想使用警報或提示說你沒有做這個或那個）。我想用它突出顯示紅色或其他。回答後，我希望顯示正確答案的數量。假設我從3中獲得2分。它顯示我有2右（我想使用innerHTML或使用appendChild）這是我如何把它設置了：Javascript測驗驗證

<!DOCTYPE html> 
<html> 
<head> 
<title>Quiz</title> 
<meta charset="utf-8"> 

</head> 
<body> 

<form> 
<p class="question1">1. Red and Blue gets what color?</p> 
<ul class="answers"> 
    <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Green</label><br/> 
    <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Purple</label><br/> 
    <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Yellow</label><br/> 
</ul> 

<p class="question2">2. Trick or ?</p> 
<input type="text" name="q2" value="treat" id="q2t"> 

<p class="question3">3. What is the best movie series of all time?</p> 
<select> 
    <option name="q3" id="q3hp" value="hp">Harry Potter</option> 
    <option name="q3" id="q3twi" value="twi">Twilight</option> 
    <option name="q3" id="q3star" value="star">Star Wars</option> 
</select> 
<br><br> 
<button type="button" id="results">Submit Quiz</button> 
</form> 
<script> 

</script> 

</body> 
</html>

只是需要一些幫助，這

來源

2014-10-05 Chad

您可以使用[jQuery驗證插件（http://jqueryvalidation.org /） – dippas 2014-10-05 01:53:44

你可以得到每個輸入的元件（Q1 ，Q2，使用

document.getElementById()

然後，你可以通過使用值屬性來獲取每個元素的值，並檢查它是否是空的（等於'Q3））。因爲你發現你可以通過創建一個CSS類並將其添加到使用

element.className +=' redWarning'

而且每一個充滿問題，你可以檢查它是否是正確的，並添加一個向右的元素添加紅色邊框的每個空元素答案反擊。在最後你得到的ID一個元素將包含正確的答案計數和你的innerHTML屬性更改爲反像這樣

document.getElementById('answersContainer').innerHTML = counter + ' right answers!'

來源

2014-10-05 04:48:17 OryanM

Javascript測驗驗證

回答

相關問題