Question

我必须构建一个多选问卷，用户可以回到上一个问题并更改答案。

我想确保以下内容（例如）：问题2的用户点击了“返回”按钮 - 如何在问题1中显示所选答案？

这是创建复选框的代码：

 $.each(multiQ[questionIndex].answers, function(key, val) {
            $('#answers').append('<label><input type="checkbox" class="radio" name="fooby[1][]" value="'+val+'"  onchange="test(this)" >' + val + '</label>');

Answer 1

嗯，我建议您使用的是HTML5 Web Storage。您可以使用它来保存每个问题的答案，然后您可以通过在按钮上提供key/value来获得上一个/下一个问题的答案。

以下是如何使用LocalStorage的示例：

// Check browser support
if (typeof(Storage) != "undefined") {
    // Store
    localStorage.setItem("lastname", "Smith");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

Answer 2

创建一个名为问题的对象，并在其中存储问题和答案。

它的结构将如下所示：

{
    0: {
            text: "Who is the president of USA",
            options: ['Obama','Obama','Obama','Obama'],
            correctOption: 3,
            userAnswer: 2
    },
    1: {
            text: "Who is the president of USA",
            options: ['Obama','Obama','Obama','Obama'],
            correctOption: 3,
            userAnswer: 2
    },

}

并将当前问题编号存储在另一个变量中（例如，称为“步骤”）。当用户单击下一个按钮时，增加步骤变量并呈现您从问题对象中获取的问题（当用户单击后退按钮时执行相同操作）。当用户选择答案时，将其写入问题对象以便存储它。通过这种方式，您可以轻松显示问题和用户答案。

编辑：

我为你做了一个例子：

http://jsfiddle.net/oxzp88ub/3/

这是一个非常简单的例子，展示了显示问题的基础知识。

jQuery - 多选问卷之间的回传和下一步

2 个答案: