Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- neuen_button_einfuegen [2025/10/23 13:32] – angelegt wikiwriter
+++ neuen_button_einfuegen [2025/10/23 14:09] (aktuell) – [In der Datei tigerquiz.css] wikiwriter
@@ Zeile 2: / Zeile 2: @@
 Um einen neuen Button im Skript //TigerQuiz// einzufügen sind folgende Einträge vorzunehmen (hier am Beispiel __Help__):
+======In der Datei tigerquiz.js======
 ===== Element erzeugen =====
@@ Zeile 21: / Zeile 23: @@
         helpBtn.click();
       });
+===== Setting holen (aus dem Markdown Dokument) =====
+      settings.disableHelp = options.disableHelp || false;
+===== Je Quiz-Seite einen Button instanziieren =====
+      let cloneHelpBtn = helpButton.cloneNode(true);
+===== Funktion für den Button bereitstellen =====
+         function helpQuiz() {
+          // Alle <span>-Elemente der html-Seite nach dem Attribut data-help durchsuchen
+          let candidates = slide.querySelectorAll('span');
+          candidates.forEach( candidate => {
+             let hasHelp = candidate.hasAttribute('data-help');
+			 if (hasHelp) {
+			  // Inhalt des Attributs holen
+		      let helpText = candidate.getAttribute('data-help');
+		      // Debug-Ausgabe
+			  console.log("candidate.helpText=" + helpText);
+		      // Code für die Einbettung der Hilfeseite erzeugen
+			  linkText = "<iframe height=\"100%\" width=\"100%\" src=\"" + helpText + ".html\"></iframe>";
+		      // Debug-Ausgabe
+			  console.log("linkText=" + linkText);
+			  // Hilfeseite in die Quiz-Seite einbetten
+			  cloneFeedbackElement.innerHTML = linkText;
+             }
+           });
+          };
+===== Auf Klick "lauschen" Event-Listener =====
+          if (!settings.disableHelp) {
+            cloneHelpBtn.addEventListener('click', () => {
+              console.log("clicked help");
+              cloneCheckBtn.disabled = false;
+              helpQuiz();
+            });
+          }
+===== und zum Schluss den Knopf in der Button-Leiste der Seite anzeigen =====
+          cloneButtonContainer.appendChild(cloneHelpBtn);
+======In der Datei tigerquiz.css======
+In den Listen mit ''.check-button'' den Eintrag ''.help-button'' hinzufügen (zwei Stellen).
+Der Punkt ''.'' ist wichtig, da aus der Klasse ''help-button'' in //quiz.js// die HTML-Klasse ''.help-button'' abgeleitet wird.
+Hintergrundfarbe festlegen
+    .help-button {
+        background-color: #7f8c00;
+    }
+Um die Aufnahme der eingebetteten Hilfe-/Lösungsseite mit ausreichend Platz auszustatten, wurde Anzeige der Klasse ''.feedback'' modifiziert:
+    .feedback {
+        font-weight: bold;
+        margin-top: 20px;
+        margin-left: 0px;
+        margin-right: 0px;
+        font-size: 24px;
+        /* center feedback */
+        text-align: center;
+        zoom: 1.0;
+        height: 100%;
+        width: 100%;
+    }
+Es kommt dabei auf die Einträge ''zoom'', ''height'' und ''width'' an.

TigerWiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge