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

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 aus die Einträge zoom, height und width an.

neuen_button_einfuegen.1761221334.txt.gz · Zuletzt geändert: von wikiwriter