-1

所以我想创建一个问卷调查之类的东西。但我希望我的布局与大多数布局略有不同。所以，我想有一个问题框，它下面有多个选择（也是框（问答框所有图像））。到目前为止，我有一个问题（有答案）正在工作并在网站的其他地方输出答案。

我需要帮助的是，一旦我单击答案框，我希望出现一个新问题和多项选择答案来代替第一个问题。

以下是我想法的基本原理：http ://www.sn0wy0wl.com/quest.html

我还希望能够存储这些答案，以便以后能够调用它们（以确认答案），尽管这可能是另一天的故事。

任何投入将不胜感激，

法规；sn0wy

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 的隐藏/显示属性来提供流程。

使用数据库，您将需要中间层来执行请求以检索问题集。

我还希望能够存储这些答案，以便以后能够调用它们（以确认答案），尽管这可能是另一天的故事。

没有数据库，您可以使用会话。

使用数据库，您将需要设置用户、问题、答案表之类的东西。

于 2012-12-10T16:53:21.623 回答