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:
Dennis Eisold
2026-04-30 22:11:55 +02:00
parent 39b4b0769f
commit 4d08c3db55
4 changed files with 126 additions and 2 deletions
+82
View File
@@ -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");