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 ... А затем показать тег p с id = "info"?

Я используюмассив сейчас, чтобы проверить это (correctAnswers)

Answer 1

Я упростил твой код для своих нужд. Вот рабочий пример http://jsfiddle.net/gurkavcu/wJhqB/

Резюме:

 // 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 {                   
           }
 });

Я использовал подключаемый модуль отображения отображения для отображения результатов и имитации событий ajax:

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

Картографический плагин Doc: http://knockoutjs.com/documentation/plugins-mapping.html
Плагин Mapping Источник: https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js