fix back and forward propagation

This commit is contained in:
ajuvercr 2020-08-28 23:48:27 +02:00
parent 8838d83ebe
commit 636392a786

View file

@ -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) {
if(!url) return {};
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() {
// This is always the same, like a static macro
const _groups = (function resetGroups() {
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() {
if(questionIndex == 1) {
document.getElementById("previousButton").disabled = true;
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 = {};
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]);
}
if(!currentQuestion) {
document.getElementById("nextButton").disabled = true;
document.getElementById("resultWrapper").classList.remove("hidden");
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]) {
_save_answers[ver] += 1;
} else {
_save_answers[ver] = 1;
}
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) {
_save_answers[ver] -= 1;
state.answers[ver] -= 1;
}
}
@ -110,35 +137,48 @@
_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) {
var result = [];
var options = select && select.options;
var opt;
function getSelectValues(select) {
var result = [];
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
return result;1
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
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 %>