Javascript - 根据 URL 显示测验问题

Question

我在 codepen 上设置了一个简单的 javascript 测验 http://codepen.io/anon/pen/dYNKJL

它每页显示一个问题，选择答案后，您将转到下一个问题。无论选择什么答案，都会给类(class)“事件”，这样我就可以在测验结束时获得所有选定的答案。

每个答案的 data-quizIndex 为 1 或 2。当我收集所有“事件”答案时，我可以查看它们的回答 data-quizIndex 是否为 1(第一个答案)，反之亦然。

无论如何，到目前为止，一切都进展顺利。然而，我现在正在尝试做别的事情。用户通过链接定向到此测验，该链接将是以下之一

www.something.com/index.html?qa=0
www.something.com/index.html?qa=1
www.something.com/index.html?qa=2

他们来自的页面有他们可以回答的问题一的预览。使用 javascript，我需要获取 qa 值，这应该不是问题。如果 qa 为 0，则测验从问题 1 开始，无需执行任何操作。如果 qa 为 1 或 2，则测验应从问题 2 开始，问题 1 的事件类别应设置为 li，且 data-quizIndex 为 1 或 data-quizIndex 2(取决于 ga 值)。

换句话说，如果他们从将他们重定向到测验的页面回答问题一，我需要这样做，以便在主测验应用程序中回答问题一。

这可能吗？如果可以，实现这一目标的最佳方法是什么？

谢谢

Answer 1

您可以在location中定义一个queryString属性，例如:

if (typeof location.queryString === 'undefined') {
  Object.defineProperty(location, 'queryString', {
    get: function() {
      return location.search.slice(1).split('&').map(function(i) {
        var arr = i.split('=');
        var a = {};
        a[decodeURIComponent(arr[0])] = arr[1] ? decodeURIComponent(arr[1]) : void 0;
        return a;
      }).reduce(function(a, b) {
        var key = Object.keys(b)[0];
        a[key] = b[key];
        return a;
      });
    }
  });
}

然后，您可以在页面加载时使用它，如下所示:

$(function() {
  var qa = location.queryString['qa'];
  if (qa === '1' || qa === '2') {
    $('.current .quiz-answer')[qa - 1].click();
  }
});

由于您想模拟第一个问题已得到回答，因此比重复代码更好的方法是模拟用户单击它。看看你的updated codepen .

更改查询字符串，然后再次加载它，您会发现它运行得非常好! :)