fix back and forward propagation

layouts/quiz.erb

@@ -13,7 +13,7 @@
   <% end %>
 </div>
 <div style="width: 70%; margin: auto; display: flex; justify-content: space-between;">
-  <button id="previousButton" onclick="goPrevious()">
+  <button id="previousButton" onclick="window.history.back()">
     Vorige!
   </button>
   <button id="nextButton" onclick="goNext()">
@@ -21,32 +21,8 @@
   </button>
 </div>
 <script>
-  const params = (function(url) {
+  // This is always the same, like a static macro
-    if(!url) return {};
+  const _groups = (function resetGroups() {
-    const params = {};
-    for(let currentVar of url.substring(1).split("&")) {
-        var pair = currentVar.split('=');
-      params[pair[0]] = decodeURIComponent(pair[1]);
-    }
-  
-    return params;
-  })(window.location.search);
-  
-  const questionIndex = 'vraag' in params ? parseInt(params['vraag']) : 1;
-  const questionId = "question_"+questionIndex;
-  
-  const currentQuestion = document.getElementById(questionId);
-  const _save_answers = {};
-  
-  function createUrl(questionIndex) {
-    const queryStart = window.location.href.indexOf("?");
-  
-    const url = queryStart >= 0 ? window.location.href.substring(0, queryStart) : window.location.href;
-  
-    return url + "?vraag="+questionIndex;
-  }
-  
-  const _groups = (function() {
       const groups = {};
       <% all_groups().each do |group| %>
         groups["d_<%= group[:id] %>"] = document.getElementById("d_<%= group[:id] %>");
@@ -54,22 +30,73 @@
     return groups;
   })();
   
+  // This keeps the state of the current question/result
+  // So navigating between questions works without reload
+  const state = {
+    'question': {
+      'index': 0,
+      'id': "",
+      'element': undefined
+    },
+    'answers': {},
+    'allQuestions': document.getElementsByClassName("question"),
+  };
   
-  (function showCorrectElements() {
+  var depth = 0;
-    if(questionIndex == 1) {
+  const previousButton = document.getElementById("previousButton");
-      document.getElementById("previousButton").disabled = true;
+  const nextButton = document.getElementById("nextButton");
+  const resultWrapper = document.getElementById("resultWrapper");
+  
+  function reset() {
+    const params = getParams();
+  
+    state.question.index = 'vraag' in params ? parseInt(params['vraag']) : 1;
+    state.question.id = "question_"+state.question.index;
+    state.question.element = document.getElementById(state.question.id);
+  
+    state.answers = {};
+  
+    save_state();
+    showCorrectElements();
   }
   
-    if(!currentQuestion) {
+  function getParams() {
-      document.getElementById("nextButton").disabled = true;
+    const url = window.location.search;
-      document.getElementById("resultWrapper").classList.remove("hidden");
+    if(!url) return {};
+    const paramsBuilder = {};
+    for(let currentVar of url.substring(1).split("&")) {
+      var pair = currentVar.split('=');
+      paramsBuilder[pair[0]] = decodeURIComponent(pair[1]);
+    }
+  
+    return paramsBuilder;
+  }
+  
+  function createRelativeUrl(newQuestionIndex) {
+    return window.location.pathname + "?vraag="+newQuestionIndex;
+  }
+  
+  function showCorrectElements() {
+    // This part resets to the original state;
+    for(let question of state.allQuestions) {
+      question.classList.add("hidden");
+    }
+    resultWrapper.classList.add("hidden");
+  
+    if(state.question.index == 1) {
+      previousButton.disabled = true;
+    } else {
+      previousButton.disabled = false;
+    }
+  
+    if(!state.question.element) {
+      nextButton.disabled = true;
+      resultWrapper.classList.remove("hidden");
   
       const result = {};
-      for(let question of document.getElementsByClassName("question")) {
+      for(let question of state.allQuestions) {
         const div = window.sessionStorage[question.id];
         if(!div) continue;
-        console.log(div);
-  
   
         const resultObj = JSON.parse(div);
         for (let key in resultObj) {
@@ -80,24 +107,24 @@
   
       show_result(result);
     } else {
-      currentQuestion.classList.remove("hidden");
+      nextButton.disabled = false;
+      state.question.element.classList.remove("hidden");
     }
-  })();
+  };
   
   function save_answers(vers) {
-      console.log(vers);
     for (let ver of vers) {
-          if (_save_answers[ver]) {
+      if (state.answers[ver]) {
-              _save_answers[ver] += 1;
+          state.answers[ver] += 1;
       } else {
-              _save_answers[ver] = 1;
+          state.answers[ver] = 1;
       }
     }
   }
   
   function del_answers(vers) {
       for (let ver of vers) {
-          _save_answers[ver] -= 1;
+          state.answers[ver] -= 1;
       }
   }
   
@@ -110,12 +137,10 @@
               _groups["d_"+ver].style.order = -1 * result[ver];
           }
       }
-  
-      console.log(result);
   }
   
   function save_state() {
-    window.sessionStorage.setItem(questionId, JSON.stringify(_save_answers));
+    window.sessionStorage.setItem(state.question.id, JSON.stringify(state.answers));
   }
   
   function getSelectValues(select) {
@@ -130,15 +155,30 @@
             result.push(opt.value || opt.text);
         }
     }
-      return result;1
+    return result;
   }
   
   function goNext() {
-    window.location.replace(createUrl(questionIndex+1));
+    window.history.pushState("object or string", "", createRelativeUrl(state.question.index + 1));
+    depth += 1;
+  
+    reset();
   }
   
   function goPrevious() {
-      window.location.replace(createUrl(questionIndex-1));
+    if(depth > 1) {
+      depth -= 1;
+      window.history.replaceState("", "", createRelativeUrl(state.question.index - 1));
     }
+  
+    reset();
+  }
+  
+  window.addEventListener("popstate", e => {
+    e.preventDefault();
+    goPrevious();
+  });
+  
+  reset();
 </script>
 <%= yield %>