knockoutjs - クイズ

Question

knockoutjsファイルを作る：

$(function() { 
    $('#info').hide(); 
    QuizViewModel(); 
    ko.applyBindings(new QuizViewModel()); 

    $('#restart').click(function() { 
     location.reload(); 
    }); 
    }); 


    function QuizViewModel() { 
     var self = this; 

     self.previous = ko.observableArray([]); 
     self.questions = ko.observableArray([]); 
     self.current = ko.observable(); 
     self.number = ko.observable(0); 
     self.previousNumbers = ko.observableArray([]); 
     self.selectedAnswers = ko.observableArray(); 
     self.correctAnswers = ko.observableArray([]); 

     self.loadQuestions = function() { 
      $('#questionsAndAnswers').fadeOut('fast'); 
      $.getJSON('./json/quiz.json', function (data) { 
       $.each(data, function (i, q) { 
        self.questions.push(q); 
        if (q.answers.tf == "true") { 
         self.correctAnswers.push(q.answers.question); 
        } 
        else { 
        // 
        } 

       }); 
      }); 
      $('#questions').fadeIn('fast'); 

     } 
     self.getQuestion = function (number) { 
      $.getJSON('./json/quiz.json', function (data) { 
       $.each(data, function (i, q) { 
        if (number == i) { 
         self.current(q); 
        } 
       }); 
      }); 
     } 

     self.nextQuestion = function (selectedAnswer) { 
      if (self.previousNumbers().length == 15) { 
       $('#questionsAndAnswers').fadeIn('fast'); 
       $('#questions').fadeOut('fast'); 
      } else { 

       var random = Math.floor(Math.random() * 15) 

       if (self.previousNumbers.indexOf(random) == -1) { 
        if (self.previousNumbers().length > 0) { 
         self.current().selectedAnswers = self.selectedAnswers(); 
         //alert(self.current().selectedAnswers[0] + " " + self.current().selectedAnswers[1]); 
         if ($.inArray(self.current().selectedAnswers[0], this.correctAnswers) > -1) { 
          $('#infoCorrect').show(); 
         } 
         self.previous.push(self.current()); 
         self.selectedAnswers.removeAll(); 
        } 
        self.previousNumbers.push(random); 
        self.getQuestion(random); 
        var previousNumber = self.number(); 
        self.number(previousNumber + 1); 

       } else { 
        self.nextQuestion(); 
       } 


      } 

     } 

     $('#questionsAndAnswers').fadeOut('fast'); 

     self.nextQuestion(); 

    } 

私のJSONファイルの

最初の部分：TF = trueまたはfalse（それに名前を与えるために）

[ 
    {"id" : 1, 
    "question": "Welke stad is de hoofdstad van Brazili\u00eb?", 
    "answers" : [{"answer":"Rio de Janeiro", "tf":"false"}, 
      {"answer":"Brasilia", "tf":"true"}, 
      {"answer":"Sa\u00F5 Paulo", "tf":"false"}], 
    "info" : "De hoofdstad van Brazili\u00eb is Brasilia en niet Rio de Janeiro of Sa\u00F5  Paulo zoals de meesten denken. Tot 1960 was Rio de Janeiro inderdaad de hoofdstad, maar  vanaf dan nam de nieuwe stad Brasilia deze functie over. Niettemin zijn Rio de Janeiro en  Sa\u00F5 Paulo zeer belangrijke steden voor het land met respectievelijk 11 en 6 miljoen  inwoners." 
    }, ... 

HTML5のページ：

<div id ="questions" data-bind="with: current"> 

     <h1 id="title">Quiz rond het thema: Brazili&euml; - Sisal</h1> 
        <p class="question" data-bind="text: question"></p> 
        <div class="answers" data-bind="foreach: answers"> 
         <p data-bind="with: $data"> 
          <input id="checkboxes"type="checkbox" data-bind="checked: $root.selectedAnswers, value: answer"/> 
          <span class="answer" data-bind="text: answer"></span> 
         </p> 
        </div> 
        <p id="info" class = "answers" data-bind="text: info"></p> 
        <img id="img1" class="buttons" src="img/next.png" title="Volgende vraag" data-bind="click: $root.nextQuestion"/> 
       </div> 
</section> 
       <div id ="questionsAndAnswers"> 
        <div> 
         <div data-bind="foreach: previous"> 
          <p class="question" data-bind="text: question"></p> 
          <div data-bind="foreach: selectedAnswers"> 
           <span data-bind="text: $data"></span> 
          </div> 
          <div data-bind="foreach: answers"> 
           <p data-bind="with: $data"> 
            <input type="checkbox" data-bind="value: answer, checked: tf=='true'" disabled="true"/> 
            <span class="answer" data-bind="text: answer"> </span><span data-bind="checked: $parent.selectedAnswers"></span> 
    </p> 
    </div> 
    <div> 

          </div> 
         </div> 
        </div> 
        <img id="restart" class="buttons" src="img/start.png" title="Herstart de quiz" /> 
       </div> 

jsonファイルの正しい答えで選択した回答をチェックする方法を教えてもらえますか？id = "info"のpタグを表示しますか？

私は私が私のニーズのためのあなたのコードを簡素化

Answer 1

この（correctAnswers）を確認するために、今のアレイを使用しています。ここでは実施例にあるhttp://jsfiddle.net/gurkavcu/wJhqB/

概要：私は結果を表示するとAjaxイベントをシミュレートするためにノックアウトマッピング・プラグインを使用

// In every getQuestion function empty correctAnswers array 
self.correctAnswers.remove(function(item){return true;}); 
// Create correct answer array for current question 
$.each(q.answers , function(j,a) {      
     if (a.tf == "true") { 
       self.correctAnswers.push(a.answer);     
      } 
      else {     
      } 
}); 

：

<p id="info" class = "answers" data-bind="text:ko.mapping.toJS($root.correctAnswers)"></p> 

マッピングプラグインドク：http://knockoutjs.com/documentation/plugins-mapping.html
マッピングプラグインのソース： https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js