Add quiz mode toggle to chapter/section toolbar
Adds a button to the existing top-right button group on chapter and section pages that hides everything outside of the breadcrumb, the heading, the rendered questions and the link to the next section or chapter at the end of the page. The state is persisted via localStorage so it survives navigation. On pages without questions a small notice is shown instead. Replaces the previously published userscript by integrating the same behaviour directly into the site.
This commit is contained in:
@@ -9,6 +9,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
for (var i = 0; i < els.length; i++) {
|
||||
shuffleChildren(els[i]);
|
||||
}
|
||||
initQuizMode();
|
||||
});
|
||||
|
||||
function answer(el, correct) {
|
||||
@@ -18,6 +19,87 @@ function answer(el, correct) {
|
||||
el.classList.add("wrong")
|
||||
}
|
||||
|
||||
(function () {
|
||||
var NOTICE_ID = "quiz-mode-notice";
|
||||
var STORAGE_KEY = "quiz-mode-enabled";
|
||||
var QUIZ_CLASS = "quiz-mode-active";
|
||||
var HAS_Q_CLASS = "quiz-has-questions";
|
||||
|
||||
function pageHasQuestions() {
|
||||
return document.querySelector(".course .question") !== null;
|
||||
}
|
||||
|
||||
function tagSectionTail() {
|
||||
var course = document.querySelector(".course");
|
||||
if (!course) return false;
|
||||
var tagged = course.querySelectorAll("[data-quiz-tail]");
|
||||
for (var i = 0; i < tagged.length; i++) {
|
||||
tagged[i].removeAttribute("data-quiz-tail");
|
||||
}
|
||||
var children = course.children;
|
||||
for (var j = 0; j < children.length; j++) {
|
||||
var child = children[j];
|
||||
if (child.tagName !== "DIV") continue;
|
||||
var text = (child.textContent || "").toLowerCase();
|
||||
if (text.indexOf("weiter zum nächsten abschnitt") !== -1 ||
|
||||
text.indexOf("weiter zum nächsten kapitel") !== -1) {
|
||||
child.setAttribute("data-quiz-tail", "");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function showNotice(text) {
|
||||
var n = document.getElementById(NOTICE_ID);
|
||||
if (!n) {
|
||||
n = document.createElement("div");
|
||||
n.id = NOTICE_ID;
|
||||
document.body.appendChild(n);
|
||||
}
|
||||
n.textContent = text;
|
||||
}
|
||||
|
||||
function hideNotice() {
|
||||
var n = document.getElementById(NOTICE_ID);
|
||||
if (n) n.parentNode.removeChild(n);
|
||||
}
|
||||
|
||||
function updateButton(btn, on) {
|
||||
btn.setAttribute("aria-pressed", on ? "true" : "false");
|
||||
btn.classList.toggle("active", on);
|
||||
btn.title = on ? "Alles anzeigen" : "Nur Fragen anzeigen";
|
||||
}
|
||||
|
||||
function setQuizMode(on) {
|
||||
var hasQ = pageHasQuestions();
|
||||
document.body.classList.toggle(HAS_Q_CLASS, hasQ);
|
||||
if (on && hasQ) tagSectionTail();
|
||||
document.body.classList.toggle(QUIZ_CLASS, on);
|
||||
var btn = document.getElementById("quiz-mode-toggle");
|
||||
if (btn) updateButton(btn, on);
|
||||
if (on && !hasQ) {
|
||||
showNotice("Keine Fragen auf dieser Seite gefunden.");
|
||||
} else {
|
||||
hideNotice();
|
||||
}
|
||||
}
|
||||
|
||||
window.initQuizMode = function () {
|
||||
var btn = document.getElementById("quiz-mode-toggle");
|
||||
if (!btn) return;
|
||||
btn.addEventListener("click", function () {
|
||||
var next = !document.body.classList.contains(QUIZ_CLASS);
|
||||
setQuizMode(next);
|
||||
try { localStorage.setItem(STORAGE_KEY, next ? "1" : "0"); } catch (e) {}
|
||||
});
|
||||
var initial = false;
|
||||
try { initial = localStorage.getItem(STORAGE_KEY) === "1"; } catch (e) {}
|
||||
if (initial) setQuizMode(true);
|
||||
else updateButton(btn, false);
|
||||
};
|
||||
})();
|
||||
|
||||
/*
|
||||
var els = document.querySelectorAll(".question .question-text");
|
||||
|
||||
|
||||
Reference in New Issue
Block a user