fix back and forward propagation
This commit is contained in:
parent
8838d83ebe
commit
636392a786
1 changed files with 102 additions and 62 deletions
164
layouts/quiz.erb
164
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) {
|
||||
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 %>
|
||||
|
|
Loading…
Reference in a new issue