Use data-quiz-shown attributes for quiz mode visibility

Mark elements that should remain visible in quiz mode at build time
via data-quiz-shown attributes (toolbar, breadcrumb, h1, questions,
solution links, next-section/-chapter links). The runtime tail
detection becomes obsolete and the CSS collapses to a single show/hide
rule.

Switch the body markers to data-quiz-mode / data-quiz-has-questions
attributes, swap the toggle between btn-secondary and btn-primary
instead of hardcoded colors, and use Bootstrap's alert alert-info for
the no-questions notice.

assets/script.js

@@ -22,40 +22,27 @@ function answer(el, correct) {
 (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";
+  var QUIZ_ATTR = "data-quiz-mode";
+  var HAS_Q_ATTR = "data-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.className = "alert alert-info";
+      n.setAttribute("role", "alert");
+      n.style.clear = "both";
+      var course = document.querySelector(".course");
+      if (course) {
+        course.insertBefore(n, course.firstChild);
+      } else {
+        document.body.appendChild(n);
+      }
     }
     n.textContent = text;
   }
@@ -67,15 +54,17 @@ function answer(el, correct) {
 
   function updateButton(btn, on) {
     btn.setAttribute("aria-pressed", on ? "true" : "false");
-    btn.classList.toggle("active", on);
+    btn.classList.toggle("btn-primary", on);
+    btn.classList.toggle("btn-secondary", !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);
+    if (hasQ) document.body.setAttribute(HAS_Q_ATTR, "");
+    else document.body.removeAttribute(HAS_Q_ATTR);
+    if (on) document.body.setAttribute(QUIZ_ATTR, "");
+    else document.body.removeAttribute(QUIZ_ATTR);
     var btn = document.getElementById("quiz-mode-toggle");
     if (btn) updateButton(btn, on);
     if (on && !hasQ) {
@@ -89,7 +78,7 @@ function answer(el, correct) {
     var btn = document.getElementById("quiz-mode-toggle");
     if (!btn) return;
     btn.addEventListener("click", function () {
-      var next = !document.body.classList.contains(QUIZ_CLASS);
+      var next = !document.body.hasAttribute(QUIZ_ATTR);
       setQuizMode(next);
       try { localStorage.setItem(STORAGE_KEY, next ? "1" : "0"); } catch (e) {}
     });

assets/style-course.css

@@ -448,41 +448,9 @@ span.formula {
 }
 
 /* Quiz-Modus */
-#quiz-mode-toggle {
-  cursor: pointer;
-}
-#quiz-mode-toggle.active {
-  background: #0a7a2a;
-  border-color: #0a7a2a;
-  color: #fff;
-}
-#quiz-mode-toggle.active svg {
-  fill: #fff;
-}
-
-#quiz-mode-notice {
-  position: fixed;
-  top: 12px;
-  right: 12px;
-  z-index: 99999;
-  max-width: 260px;
-  padding: 8px 12px;
-  font: 500 13px/1.35 system-ui, -apple-system, sans-serif;
-  color: #333;
-  background: #fff3cd;
-  border: 1px solid #ffe69c;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-body.quiz-mode-active.quiz-has-questions .course > * {
+body[data-quiz-mode][data-quiz-has-questions] .course > * {
   display: none !important;
 }
-body.quiz-mode-active.quiz-has-questions .course > .course-toolbar,
-body.quiz-mode-active.quiz-has-questions .course > h1,
-body.quiz-mode-active.quiz-has-questions .course > nav,
-body.quiz-mode-active.quiz-has-questions .course > .question,
-body.quiz-mode-active.quiz-has-questions .course > [data-quiz-tail],
-body.quiz-mode-active.quiz-has-questions .course > [data-quiz-tail] ~ * {
+body[data-quiz-mode][data-quiz-has-questions] .course > [data-quiz-shown] {
   display: revert !important;
 }