Webseiten-Werkzeuge


neuen_button_einfuegen

Dies ist eine alte Version des Dokuments!


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):

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);
neuen_button_einfuegen.1761220134.txt.gz · Zuletzt geändert: von wikiwriter