TigerWiki

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
====== Einfügen eines neuen Buttons in tigerquiz.js ======

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 =====
    let helpButton = document.createElement('button'); 
===== Klasse für alle Seiten zuweisen =====
    helpButton.classList.add('help-button');
===== Beschriftung (Text) zuweisen =====
    helpButton.innerHTML = "Help";
===== Klasse für das gesamte Dokument zuweisen =====
    helpButton.classList.add('action-buttons');

===== Taste und Klick-Funktion zuweisen =====
      settings.helpKey = options.helpKey ? options.helpKey.toLowerCase() : "h";
      settings.helpKeyCode = keyCodes[settings.helpKey] || 72;
      
      deck.addKeyBinding({ keyCode: settings.helpKeyCode, key: settings.helpKey }, () => {
        let currentSlide = deck.getCurrentSlide();
        let helpBtn = currentSlide.querySelector('.help-button');
        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

Seiten-Werkzeuge
