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

Merge pull request #117 from DN9KGB/feature/quiz-mode-button

Browse Source 
Add quiz mode toggle to chapter/section toolbar
This commit is contained in:
Tim Grelka
2026-05-03 22:28:23 +02:00
committed by GitHub
parent 6d685a81fe 7168d9b1e9
commit 1580b721a5
7 changed files with 91 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/script.js
+71
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,76 @@ function answer(el, correct) {
el.classList.add("wrong")
}
(function () {
var NOTICE_ID = "quiz-mode-notice";
var STORAGE_KEY = "quiz-mode-enabled";
var QUIZ_ATTR = "data-quiz-mode";
var HAS_Q_ATTR = "data-quiz-has-questions";
function pageHasQuestions() {
return document.querySelector(".course .question") !== null;
}
function showNotice(text) {
var n = document.getElementById(NOTICE_ID);
if (!n) {
n = document.createElement("div");
n.id = NOTICE_ID;
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;
}
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("btn-primary", on);
btn.classList.toggle("btn-secondary", !on);
btn.title = on ? "Alles anzeigen" : "Nur Fragen anzeigen";
}
function setQuizMode(on) {
var hasQ = pageHasQuestions();
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) {
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.hasAttribute(QUIZ_ATTR);
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");
assets/style-course.css
+8
View File
@@ -446,3 +446,11 @@ span.formula {
.course .katex-display {
margin: 1em 0em;
}
/* Quiz-Modus */
body[data-quiz-mode][data-quiz-has-questions] .course > * {
display: none !important;
}
body[data-quiz-mode][data-quiz-has-questions] .course > [data-quiz-shown] {
display: revert !important;
}
templates/html/chapter.html
+4 -3
View File
@@ -1,14 +1,15 @@
<div style="float: right;">
<div style="float: right;" data-quiz-shown>
<div class="btn-group" role="group">
{% if chapter["video_url"] %}
<a class="btn btn-secondary" href="{{ chapter["video_url"] }}" title="Video öffnen" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z"></path></svg></a>
{% endif %}
<a class="btn btn-secondary" href="{{ edition }}_slide_{{ chapter["ident"] }}.html" title="Präsentationsfolien öffnen"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M840-120v-640H120v320H40v-320q0-33 23.5-56.5T120-840h720q33 0 56.5 23.5T920-760v560q0 33-23.5 56.5T840-120ZM360-400q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T440-560q0-33-23.5-56.5T360-640q-33 0-56.5 23.5T280-560q0 33 23.5 56.5T360-480ZM40-80v-112q0-34 17.5-62.5T104-298q62-31 126-46.5T360-360q66 0 130 15.5T616-298q29 15 46.5 43.5T680-192v112H40Zm80-80h480v-32q0-11-5.5-20T580-226q-54-27-109-40.5T360-280q-56 0-111 13.5T140-226q-9 5-14.5 14t-5.5 20v32Zm240-400Zm0 400Z"/></svg></a>
<a class="btn btn-secondary" target="_blank" href="/hm" title="Hilfsmittel herunterladen"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 640 640" fill="#000000"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M192 112L304 112L304 200C304 239.8 336.2 272 376 272L464 272L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 128C176 119.2 183.2 112 192 112zM352 131.9L444.1 224L376 224C362.7 224 352 213.3 352 200L352 131.9zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM248 320C234.7 320 224 330.7 224 344C224 357.3 234.7 368 248 368L392 368C405.3 368 416 357.3 416 344C416 330.7 405.3 320 392 320L248 320zM248 416C234.7 416 224 426.7 224 440C224 453.3 234.7 464 248 464L392 464C405.3 464 416 453.3 416 440C416 426.7 405.3 416 392 416L248 416z"/></svg></a>
<button type="button" class="btn btn-secondary" id="quiz-mode-toggle" title="Nur Fragen anzeigen" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 16 16" fill="#000000"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/></svg></button>
</div>
</div>
<nav aria-label="breadcrumb">
<nav aria-label="breadcrumb" data-quiz-shown>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="{{ edition }}_course_index.html">{{ name }}</a></li>
@@ -16,7 +17,7 @@
</ol>
</nav>
<h1>{{ chapter["title"] }}</h1>
<h1 data-quiz-shown>{{ chapter["title"] }}</h1>
<p>{{ chapter["abstract"] }}</p>
<div class="chapter-toc d-grid gap-2">
{% for section in chapter["sections"] %}
templates/html/next_chapter.html
+1 -1
View File
@@ -1,4 +1,4 @@
<br/>
<div>
<div data-quiz-shown>
Weiter zum nächsten Kapitel: <a href="{{ url }}">{{ title }}</a>
</div>
templates/html/next_section.html
+1 -1
View File
@@ -1,4 +1,4 @@
<br/>
<div>
<div data-quiz-shown>
Weiter zum nächsten Abschnitt: <a href="{{ url }}">{{ title }}</a>
</div>
templates/html/question.html
+2 -2
View File
@@ -1,4 +1,4 @@
<div class="question layout-{{ layout }}" id="{{ number }}">
<div class="question layout-{{ layout }}" id="{{ number }}" data-quiz-shown>
<div class="question-text">
{{ number }}: {{ question }}
</div>
@@ -23,7 +23,7 @@
{% endfor %}
</div>
</div>
<div class="solution">
<div class="solution" data-quiz-shown>
{% if has_solution %}
<a class="btn btn-warning btn-sm d-inline-flex align-items-center" href="{{ number }}.html" aria-label="Lösungshinweis zu Frage {{ number }}" title="Lösungshinweis">
<svg class="solution-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" aria-hidden="true" focusable="false">
templates/html/section.html
+4 -3
View File
@@ -1,14 +1,15 @@
<div style="float: right;">
<div style="float: right;" data-quiz-shown>
<div class="btn-group" role="group">
{% if section["video_url"] %}
<a class="btn btn-secondary" href="{{ section["video_url"] }}" title="Video öffnen" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z"></path></svg></a>
{% endif %}
<a class="btn btn-secondary" href="{{ edition }}_slide_{{ chapter["ident"] }}.html#{{ section_id }}" title="Präsentationsfolien öffnen"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M840-120v-640H120v320H40v-320q0-33 23.5-56.5T120-840h720q33 0 56.5 23.5T920-760v560q0 33-23.5 56.5T840-120ZM360-400q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T440-560q0-33-23.5-56.5T360-640q-33 0-56.5 23.5T280-560q0 33 23.5 56.5T360-480ZM40-80v-112q0-34 17.5-62.5T104-298q62-31 126-46.5T360-360q66 0 130 15.5T616-298q29 15 46.5 43.5T680-192v112H40Zm80-80h480v-32q0-11-5.5-20T580-226q-54-27-109-40.5T360-280q-56 0-111 13.5T140-226q-9 5-14.5 14t-5.5 20v32Zm240-400Zm0 400Z"/></svg></a>
<a class="btn btn-secondary" target="_blank" href="/hm" title="Hilfsmittel herunterladen"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 640 640" fill="#000000"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M192 112L304 112L304 200C304 239.8 336.2 272 376 272L464 272L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 128C176 119.2 183.2 112 192 112zM352 131.9L444.1 224L376 224C362.7 224 352 213.3 352 200L352 131.9zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM248 320C234.7 320 224 330.7 224 344C224 357.3 234.7 368 248 368L392 368C405.3 368 416 357.3 416 344C416 330.7 405.3 320 392 320L248 320zM248 416C234.7 416 224 426.7 224 440C224 453.3 234.7 464 248 464L392 464C405.3 464 416 453.3 416 440C416 426.7 405.3 416 392 416L248 416z"/></svg></a>
<button type="button" class="btn btn-secondary" id="quiz-mode-toggle" title="Nur Fragen anzeigen" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 16 16" fill="#000000"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/></svg></button>
</div>
</div>
<nav aria-label="breadcrumb">
<nav aria-label="breadcrumb" data-quiz-shown>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="{{ edition }}_course_index.html">{{ name }}</a></li>
@@ -17,7 +18,7 @@
</ol>
</nav>
<h1>{{ section["title"] }}</h1>
<h1 data-quiz-shown>{{ section["title"] }}</h1>
<a id="margin_0"></a>
{{ section["content"] }}