Superminaren/50ohm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use data-quiz-shown attributes for quiz mode visibility

Browse Source 
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.
This commit is contained in:
Dennis Eisold
2026-05-03 20:09:46 +02:00
parent 4d08c3db55
commit a1698c9d3d
7 changed files with 30 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style-course.css
+2 -34
View File
@@ -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;
}