durfdoen-2.0/layouts/quiz.erb
2020-09-16 17:28:03 +02:00

240 lines
6.8 KiB
Text

<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">
<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() + 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) {
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 %>