2013-08-23 16 views
1
<div class="question" id="question_0"> 
    <label> 
     Something: 
     <input type="radio" name="radyo" value="1" /> 
     <input type="radio" name="radyo" value="2" /> 
     <input type="radio" name="radyo" value="3" /> 
     <input type="radio" name="radyo" value="4" /> 
     <input type="radio" name="radyo" value="5" /> 
    </label> 
</div> 
<div class="question" id="question_1"> 
    <label> 
     FFFF: 
     <input type="radio" name="radyo" value="1" /> 
     <input type="radio" name="radyo" value="2" /> 
     <input type="radio" name="radyo" value="3" /> 
     <input type="radio" name="radyo" value="4" /> 
     <input type="radio" name="radyo" value="5" /> 
    </label> 
</div> 
<div class="question" id="question_2"> 
    <label> 
     asdf: 
     <input type="radio" name="radyo" value="6" /> 
     <input type="radio" name="radyo" value="2" /> 
     <input type="radio" name="radyo" value="3" /> 
     <input type="radio" name="radyo" value="4" /> 

    </label> 
</div> 
<button id="next" disabled="disabled">Next</button> 

HTML禁用單選按鈕後一些改掉和改變形式分別

.question { display: none; } 
#question_0 { display: block; } 

CSS

$(document).ready(function() { 

    /* 
    * question: What question the user is currently on 
    * trys: The amount of tries for the CURRENT question 
    * answers: The answers for each questions. Matches with radio button values 
    */ 
    var question = trys = 0, 
     answers = [1, 6, 2]; 




    // When the user tries to click the next button (only applies when not disabled) 
    $('#next').click(function() { 

     // If the next question exists, transition to it 
     if ($('#question_' + ++question).length) { 
      $('#next').attr('disabled', 'disabled'); 
      $('#question_' + (question - 1)).fadeOut('fast', function() 
       { $('#question_' + ++question).fadeIn('fast'); }); 
      trys = 0; 

     // Else submit the form 
     } else alert('submit form'); //$('form').submit(); ??? 
    }); 




    // When the user clicks on a radio button (tries to answer a question) 
    $('input[type="radio"]').click(function() { 

     // If the answer does not equal what the user clicked on 
     if ($(this).val() != answers[question]) { 
      $('#next').attr('disabled', 'disabled'); //Disable the button 
      ++trys; 
      if (trys >= 3) { //If the user tried 3 times, they fucked up 
       $('#question_' + question + ' input').attr('disabled', 'disabled'); 
       alert('you fucked up'); 
      } else alert('wrong'); //If the user still has more tries tell them they're wrong 

     // Else enable the ability to go to the next question 
     } else $('#next').removeAttr('disabled'); 
    }); 

}); 

的javascript

嘿我有這樣的代碼。你首先看到的東西,當你點擊第一個單選按鈕。你可以點擊下一步。否則,你會看到一些錯誤消息。三個錯誤的trys表單輸入後將被禁用。在下一節中,您將看到另一個單選按鈕。但是這並不奏效。我以爲我有答案陣列中的答案,但我不明白爲什麼它不工作任何提示?

回答

0

這裏有幾個技巧:

  1. 「下一步」按鈕處理程序傳遞到下一個階段後,應禁用按鈕;
  2. 檢查單選按鈕值以匹配您答案數組中某個階段的任何值;
  3. 顯示開始的第一階段;
+0

感謝您回答實際上我認爲無線電的價值與陣列答案的值相匹配[1,4,2]第一個問題的答案是第一個單選按鈕,第二個問題是第三個問題的第四個按鈕是第二個單選按鈕。 你能否清楚地解釋「顯示第一階段開始」。我的英文不是很好。如果你可以給一些修復。我會很高興。 –