Javascript-根據URL顯示測驗問題

Question

我在Codepen http://codepen.io/anon/pen/dYNKJL上設置了一個簡單的JavaScript測驗

它每頁顯示一個問題，選擇答案后，移至下一個問題。 無論選擇什么答案，都將其設為“活動”類別，因此我可以在測驗末獲得所有選擇的答案。

每個答案的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，則測驗應從第二個問題開始，並且應將問題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();
  }
});

由於您想模擬第一個問題已得到回答，因此比重復代碼更好的是模擬用戶單擊的情況。 看一下更新的Codepen 。

更改查詢字符串，然后再次加載它，您會發現它的工作原理很吸引人！ :)