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
+40
View File
@@ -446,3 +446,43 @@ span.formula {
.course .katex-display {
margin: 1em 0em;
}
/* 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 > * {
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] ~ * {
display: revert !important;
}