Javascript - 根据 URL 显示测验问题

Question

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

它每页显示一个问题，一旦您选择了一个答案，您就会转到下一个问题。无论选择什么答案都会被赋予“事件”类，这样我就可以在测验结束时得到所有选择的答案。

每个答案的 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 .

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