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>
  <br>
  <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 quiz_content">
  <h2> Misschien is een van deze verenigingen iets voor jou </h2>
  <p>Nog dat extra zetje nodig om eens langs te gaan? Ga met een screenshot van je resultaat naar een activiteit van één van deze verenigingen en maak kans op een leuke prijs, zoals ontbijt aan huis, een krantenabonnement of een UGent-sweater!</p>
  <div id="resultWrapper" class="fancy_link_container">
  </div>
    <div onclick="window.location.href='/quiz'" class="quizSpotlight">
    <a class="small">Opnieuw</a>
  </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() + projecten) %>;

  // 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");
  const quizIntro = document.getElementById("quiz_intro");

  function reset() {
    const params = getParams();

    state.question.index = 'vraag' in params ? parseInt(params['vraag']) : 0;
    state.question.index = Math.max(state.question.index, 0);
    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) {
    if(newQuestionIndex < 1) {
      return window.location.pathname;
    } else {
      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");
    quizIntro.classList.add("hidden");
    previousButton.style.display = "";

    if(state.question.index == 0) {
      previousButton.style.display = "none";
      nextButton.style.display = "none";
      quizIntro.classList.remove("hidden");
      return;
    }

    if(!state.question.element) {
      previousButton.style.display = "none";
      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 > 0) {
      depth -= 1;
      window.history.replaceState("", "", createRelativeUrl(state.question.index - 1));
    } else {
      if(state.question.index - 1 != 0)
        window.location.search = "vraag="+ (state.question.index - 1);
      else {
        window.location.search = "";
      }
    }

    reset();
  }

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

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