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

我根据我的需要简化了您的代码。这是一个工作示例 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>

映射插件文档：http://knockoutjs.com/documentation/plugins-mapping.html
映射插件来源： https://raw .github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js