2013-03-30 28 views
1

你好,我想作一個jQuery測驗,但是當他們回答每一個答案,它只是說: 問題1是假 問題2是真jquery的測驗改變結果視圖

有沒有爲我改變的方式它到: 問題1是正確的 問題2是錯誤的

或者這是不可能的?

以下是問答:http://jsfiddle.net/trickedgaming/AJ4mj/

$(function() { 
/*jshint laxcomma:true */ (function ($) { 

    function _range(min, max, rand) { 
     var arr = (new Array(++max - min)) 
      .join('.').split('.') 
      .map(function (v, i) { 
      return min + i; 
     }); 
     return rand ? arr.map(function (v) { 
      return [Math.random(), v]; 
     }) 
      .sort().map(function (v) { 
      return v[1]; 
     }) : arr; 
    } 

    $.fn.shuffle = function() { 
     return this.each(function() { 
      var $this = $(this), 
       children = $this.children(), 
       rand = _range(0, children.length - 1, true).map(function (el) { 
        return children[el]; 
       }); 
      if (children.length) $(rand).appendTo($this); 
     }); 
    }; 

}(jQuery)); 

$('ul').shuffle(); 
var jQuiz = { 
    answers: { 
     q1: 'd', 
     q2: 'c', 
     q3: 'a', 
     q4: 'd', 
     q5: 'a' 
    }, 
    questionLenght: 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">True= Correct Answer<br />False= Wrong Answer<br /><br />Your total score is ' + trueCount * 1 + '/10</div>' 
      $('#resultKeeper').html(resultSet).show(); 
     }) 
    } 
}; 
jQuiz.init(); 

})

回答

1

是的,這是很容易。

我更新了JSFIDDLE,進行以下更改:

if (results[i] == true) { 
         resultSet += '<div> Question ' + (i + 1) + ' is ' + ' correct ' + '</div>'; 
        } else { 
         resultSet += '<div> Question ' + (i + 1) + ' is ' + ' wrong ' + '</div>'; 
        } 
+0

非常感謝你的幫助:)但一個問題,目前在測驗中他們需要按下單選按鈕,所以我想知道是否有辦法讓它檢查單選按鈕,如果他們按下旁邊的文字?或者那是不可能的? –

+0

是的,這是可能的,這是你會發生什麼,例如,如果輸入是在標籤標籤內,點擊標籤中的文本,輸入也會被點擊。檢查小提琴,然後點擊文字。 – enb081

+0

噢,出於某種原因,我不會爲我做,但它現在起作用。 –

1

基礎上,results[i]

if (results[i] == true) { 
    trueCount++; 
    resultSet += '<div> Question ' + (i + 1) + ' is correct' + '</div>'; 
} else { 
    resultSet += '<div> Question ' + (i + 1) + ' is wrong' + '</div>'; 
} 

更新演示您只需將正確的說法爲您resultSethttp://jsfiddle.net/AJ4mj/3/

1

你只需要通過if-else塊進行更改。

Demo

if (results[i] == true){ 
    trueCount++; 
    resultSet += '<div> Question ' + (i + 1) + ' is Correct</div>'; 
}else 
    resultSet += '<div> Question ' + (i + 1) + ' is incorrect </div>'; 

PS

剛一說明,與;結束陳述酌情。我沒有看到你閉幕發言與;

1

嗨已經更改了代碼:See Code

修改行93

var qStatus="Wrong"; 
    if (results[i] == true) {trueCount++; qStatus="Correct";} 
    resultSet += '<div> Question ' + (i + 1) + ' is ' + qStatus + '</div>'