durfdoen-2.0/layouts/quiz.erb

<div id="quiz_intro" class="hidden quiz_content">
  <h2 class="page-header-sub">Welke verenigingen passen bij jou?</h2>
  <p>Het invullen van deze quiz zal jou helpen de vereniging te vinden die bij jou past.</p>
  <p>Niet alle vragen hoeven ingevuld te worden en bij sommige vragen komen plots bijvragen tevoorschijn.</p>
  <div onclick="goNext()" class="quizSpotlight">
    <a>Start</a>
  </div>
</div>
<div class="quiz_content">
  <% @items.find_all("/quiz/*").sort_by{ |x| x.path }.each_with_index do |quest, i| %>
    <div id="question_<%=i+1%>" class="question question_wrapper hidden">
      <%= render '/partials/question.*', question: quest, number: i.to_s %>
    </div>
  <% end %>
</div>
<div class="hidden">
  <h3> Deze verenigingen kan je eens uitchecken ;) </h3>
  <div id="resultWrapper" class="fancy_link_container">
  </div>
</div>
<div class="buttons quiz_content">
  <div>
    <button id="previousButton" onclick="goPrevious()">
      Vorige
    </button>
  </div>
  <div>
    <button id="nextButton" onclick="goNext()">
      Volgende
    </button>
  </div>
</div>
<script>
  Array.prototype.stableSort = function(cmp) {
    cmp = !!cmp ? cmp : (a, b) => {
      if (a < b) return -1;
      if (a > b) return 1;
      return 0;
    };
    let stabilizedThis = this.map((el, index) => [el, index]);
    let stableCmp = (a, b) => {
      let order = cmp(a[0], b[0]);
      if (order != 0) return order;
      return a[1] - b[1];
    }
    stabilizedThis.sort(stableCmp);
    for (let i=0; i<this.length; i++) {
      this[i] = stabilizedThis[i][0];
    }
    return this;
  }

  Array.prototype.sortByKey = function(key) {
    return this.sort(function(a, b) {
      var x = key(a); var y = key(b);
      return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
  }

  const _results = <%= to_partials(all_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"),
  };

  var depth = 0;
  const previousButton = document.getElementById("previousButton");
  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 = {};

    // Hide all subquestions
    for(let form of [...document.querySelectorAll(`[id^="${state.question.index - 1}#"]`)]) {
      form.style.display = "none";

      // The vraag2 -> politiek -> Vlaamse en nationale politiek div wasn't set to none, because of the more complicated id.
      form.querySelectorAll(".question_wrapper").forEach(e => e.style.display = "none");
    }

    // Set checked to false for everything in this question
    for(let form of [...document.querySelectorAll(`[id^="${state.question.index - 1}"][id$="form"]`)]) {
      [...form.elements].filter(e => e.nodeName == "INPUT").forEach(e => e.checked = false);
    }

    save_state();
    showCorrectElements();
  }

  function getParams() {
    const url = window.location.search;
    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.parentNode.classList.add("hidden");

    if(state.question.index == 1) {
      previousButton.style.display = "none";
    } else {
      previousButton.style.display = "";
    }

    if(!state.question.element) {
      nextButton.style.display = "none";
      resultWrapper.parentNode.classList.remove("hidden");

      const result = {};
      for(let question of state.allQuestions) {
        const div = window.sessionStorage[question.id];
        if(!div) {
          console.log("You didn't answer question "+question.id)
          continue;
        }

        const resultObj = JSON.parse(div);
        for (let key in resultObj) {
          if (!(key in result)) result[key] = 0;
          result[key] += resultObj[key];
        }
      }

      show_result(result);
    } else {
      nextButton.style.display = "";
      state.question.element.classList.remove("hidden");
    }
  };

  function save_answers(vers) {
    for (let ver of vers) {
      if (state.answers[ver]) {
          state.answers[ver] += 1;
      } else {
          state.answers[ver] = 1;
      }
    }
  }

  function del_answers(vers) {
      for (let ver of vers) {
          state.answers[ver] -= 1;
      }
  }

  function show_result(result) {
    while (resultWrapper.lastElementChild) {
        resultWrapper.removeChild(resultWrapper.lastElementChild);
    }

    for (let [ver, val] of Object.entries(result).sortByKey(([k1, v1]) => k1).stableSort(([k1, v1], [k2, v2]) => v2 - v1)) {
      if(!(ver in _results)) {
        console.error("No html found for '"+ver+"'");
        continue;
      }

      if(!val) continue;

      const create_wrapper= document.createElement('div');
      create_wrapper.innerHTML = _results[ver];
      const el = create_wrapper.firstChild;
      el.style.order = val;
      resultWrapper.appendChild(create_wrapper);
    }
  }

  function save_state() {
    window.sessionStorage.setItem(state.question.id, JSON.stringify(state.answers));
  }

  function goNext() {
    window.history.pushState("object or string", "", createRelativeUrl(state.question.index + 1));
    depth += 1;

    reset();
  }

  function goPrevious() {
    if(depth > 1) {
      depth -= 1;
      window.history.replaceState("", "", createRelativeUrl(state.question.index - 1));
    } else {
      window.location.search = "vraag="+ (state.question.index - 1);
    }

    reset();
  }

  window.addEventListener("popstate", e => {
    e.preventDefault();
    goPrevious();
  });

  reset();
</script>
<%= yield %>