如何使用jquery創建一個簡單的調查

Question

很抱歉我的noob問題，但我在創建一個包含大約3個問題的簡單調查流程時遇到了困難。每個問題有多種選擇，用戶點擊一個選項，然後點擊NEXT，然後出現下一個問題。一旦用戶回答了最後一個問題，他就會點擊「領取您的獎品」轉到另一個網站。我怎麼能用JQuery來做到這一點？我到處搜索，但找不到解決方案。

這樣的頁面：http://freebies.clubelli.com/

但問題都沒有正確或錯誤的答案多選

Answer 1

<script type="text/javascript" src="scripts/jq-all-debug.js"></script> 
    <script> 
$(function(){ 
    var jQuiz = { 
     answers: { q1: 'd', q2: 'd', q3: 'a', q4: 'c', q5: 'a' }, 
     questionLength: 5, 
     checkAnswers: function() { 
      var arr = this.answers; 
      var ans = this.userAnswers; 
      var resultArr = [] 
      for (var p in ans) { 
       var x = parseInt(p) + 1; 
       var key = 'q' + x; 
       var flag = false; 
       if (ans[p] == 'q' + x + '-' + arr[key]) { 
        flag = true; 
       } 
       else { 
        flag = false; 
       } 
       resultArr.push(flag); 
      } 
      return resultArr; 
     }, 
     init: function(){ 
      $('.btnNext').click(function(){ 
       if ($('input[type=radio]:checked:visible').length == 0) { 

        return false; 
       } 
       $(this).parents('.questionContainer').fadeOut(500, function(){ 
        $(this).next().fadeIn(500); 
       }); 
       var el = $('#progress'); 
       el.width(el.width() + 120 + 'px'); 
      }); 
      $('.btnPrev').click(function(){ 
       $(this).parents('.questionContainer').fadeOut(500, function(){ 
        $(this).prev().fadeIn(500) 
       }); 
       var el = $('#progress'); 
       el.width(el.width() - 120 + 'px'); 
      }) 
      $('.btnShowResult').click(function(){ 
       var arr = $('input[type=radio]:checked'); 
       var ans = jQuiz.userAnswers = []; 
       for (var i = 0, ii = arr.length; i < ii; i++) { 
        ans.push(arr[i].getAttribute('id')) 
       } 
      }) 
      $('.btnShowResult').click(function(){ 
       $('#progress').width(300); 
       $('#progressKeeper').hide(); 
       var results = jQuiz.checkAnswers(); 
       var resultSet = ''; 
       var trueCount = 0; 
       for (var i = 0, ii = results.length; i < ii; i++){ 
        if (results[i] == true) trueCount++; 
        resultSet += '<div> Question ' + (i + 1) + ' is ' + results[i] + '</div>' 
       } 
       resultSet += '<div class="totalScore">Your total score is ' + trueCount * 20 + '/100</div>' 
       $('#resultKeeper').html(resultSet).show(); 
      }) 

     $('.btnShowResult').click(function(){ 
       $('#answer').width(300); 
       $('#answerKeeper').hide(); 
       var results = jQuiz.checkAnswers(); 
       var resultSet = ''; 
       var trueCount = 0; 
       for (var i = 0, ii = results.length; i < ii; i++){ 
        if (results[i] == true) trueCount++; 
        resultSet += '<div> Question ' + (i + 1) + ' is ' + results[i] + '</div>' 
       } 
       resultSet += '<div class="totalScore">Your total score is ' + trueCount * 20 + '/100</div>' 
       $('#answerKeeper').html(resultSet).show(); 
      }) 
     } 
    }; 
    jQuiz.init(); 
}) 

</script>