在HTML表單測驗上執行用戶回答訂單

Question

我正在尋找一種方法來強制HTML表單測驗的回答順序。這是相對直接的，我想 - 我只是想讓用戶被迫按順序回答問題。

這裏是一個編碼例如：

<form method="post"> 

Answer the Questions! 

<P id="question1" onclick="showQuestion('question2')" >1. The word which means "house" is:<BR> 
<input type="radio" required="required" name="1.The word which means house is" value="maison">maison<BR> 
<input type="radio" name="1.The word which means house is" value="quatre">quatre<BR> 
<input type="radio" name="1.The word which means house is" value="soleil">soleil<BR> 
<input type="radio" name="1.The word which means house is" value="poisson">poisson<BR> 
</p> 

<P id="question2" style="display:none;" onclick="showQuestion('question3')" >2. The word which means "fish" is:<BR> 
<input type="radio" required="required" name="2. The word which means fish is" value="maison">maison<BR> 
<input type="radio" name="2. The word which means fish is" value="valise">valise<BR> 
<input type="radio" name="2. The word which means fish is" value="soleil">soleil<BR> 
<input type="radio" name="2. The word which means fish is" value="poisson">poisson<BR> 
</p> 

<P id="question3" style="display:none;">3. The word which means "suitcase" is:<BR> 
<input type="radio" name="3. The word which means suitcase is" value="renard">renard<BR> 
<input type="radio" name="3. The word which means suitcase is" value="valise">valise<BR> 
<input type="radio" name="3. The word which means suitcase is" value="soleil">soleil<BR> 
<input type="radio" name="3. The word which means suitcase is" value="poisson">poisson<BR> 
</p> 

</form> 

這是一個回答後，將顯示下一個問題的功能，但是我真正想要做的是顯示所有的3個問題，並擁有所需的驗證失敗如果用戶不按順序回答問題。

<script> 
window.showQuestion = function (val){ 
    var x = document.getElementById(val); 
    x.style.display = 'inline'; 
} 
</script> 

Answer 1

如果你正在尋找的CSS有條件的表單字段我的建議是看看這個PEN.

，或者你可以在JS這樣定義。

var selected = $("#question1 option:selected").val(); 

並改變這樣的選項。

<option value="1">Option 1</option> 
<option value="2">Option 2</option>