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标签？

我现在正在使用一个数组来检查（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 {                   
           }
 });

我使用knockout mapping plugin来显示结果并模拟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

knockoutjs - 进行测验

1 个答案: