-1

ということで、アンケートみたいなものを作りたいと思っています。しかし、私は自分のレイアウトを他のレイアウトとは少し異なるものにしたいと考えています。そこで、質問ボックスとその下に複数の選択肢 (ボックス (質問ボックスと回答ボックスはすべて画像)) を用意したいと思います。これまでのところ、1 つの質問 (回答付き) が機能し、サイトの他の場所で回答を出力しています。

私が助けを必要としているのは、回答ボックスをクリックすると、最初の質問の代わりに新しい質問と多肢選択式の回答が表示されるようにしたいということです。

ここに私のアイデアの基本があります: http://www.sn0wy0wl.com/quest.html

また、これらの回答を保存して、後で（回答の確認のために）呼び出すことができるようにしたいと考えていますが、それは別の日の話になる可能性があります.

ご意見をお寄せいただければ幸いです。

登録; ずいぶん

4

2 に答える 2

2

http://knockoutjs.com/を見ると、質問を保持するビューモデルと、可能な回答の観察可能な配列を作成し、ビュー内のクリックをバインドして質問を変更できます。少し似ています：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Knockout Example</title>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
        <script>
            function QuestionnaireViewModel() {
                var self = this;
                var currentQuestionIndex = 0;

                //Some dummy model data, probably want to load this from an ajax call
                var questions = [
                    {
                        caption: 'How do you like Knockout.js?',
                        answers: [
                            { caption: 'It sucks!' },
                            { caption: 'It rules!' }
                        ]
                    },
                    {
                        caption: 'But seriously, it is pretty cool right?',
                        answers: [
                            { caption: 'Ok, it is pretty awsome' },
                            { caption: 'I told you man, it rocks!' }
                        ]
                    }
                ];

                //Setup observable properties
                self.currentQuestion = new ko.observable(questions[0]);
                self.progress = new ko.observableArray();

                //Add a command
                self.selectQuestion = function (answer) {
                    self.progress.push({ question: questions[currentQuestionIndex].caption, answer: answer.caption });

                    currentQuestionIndex++;
                    if (currentQuestionIndex < questions.length) {
                        self.currentQuestion(questions[currentQuestionIndex]);
                    }
                    else {
                        alert('Your done');
                    }
                };
            };

            $(document).ready(function () {
                //Apply bindings
                ko.applyBindings(new QuestionnaireViewModel());
            });
        </script>

        <div data-bind="with:currentQuestion">
            <h1 data-bind="text:caption"></h1>
            <ul data-bind="foreach:answers">
                <li data-bind="text:caption, click:$root.selectQuestion"></li>
            </ul>
        </div>
        <div data-bind="foreach:progress">
            <div>
                For question 
                <b data-bind="text:question"></b>
                you selected 
                <b data-bind="text:answer"></b>
            </div>
        </div>
    </head>
</html>

明らかに、これには少しリファクタリングと整理が必要ですが、うまくいけば、ドリフトが得られます。ノックアウト サイトには、優れたドキュメントと例もいくつかあります。

于 2012-12-10T17:10:38.413 に答える
0

これは多面的な質問です。

私が助けを必要としているのは、回答ボックスをクリックすると、最初の質問の代わりに新しい質問と多肢選択式の回答が表示されるようにしたいということです。

データベースが質問を取得しなくても、javascript で hide/show 属性を使用して流れを与えることができます。

データベースでは、質問セットを取得するためのリクエストを実行するための中間層が必要になります。

また、これらの回答を保存して、後で（回答の確認のために）呼び出すことができるようにしたいと考えていますが、それは別の日の話になる可能性があります.

データベースがなくても、セッションを使用できます。

データベースでは、ユーザー、質問、回答テーブルなどを設定する必要があります。

于 2012-12-10T16:53:21.623 に答える