Um einen neuen Button im Skript TigerQuiz einzufügen sind folgende Einträge vorzunehmen (hier am Beispiel Help):

  let helpButton = document.createElement('button'); 

  helpButton.classList.add('help-button');

  helpButton.innerHTML = "Help";

  helpButton.classList.add('action-buttons');

    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();
    });

    settings.disableHelp = options.disableHelp || false;

    let cloneHelpBtn = helpButton.cloneNode(true);

       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;
           }
         });
        };   
        

        if (!settings.disableHelp) {
          cloneHelpBtn.addEventListener('click', () => {
            console.log("clicked help");
            cloneCheckBtn.disabled = false;
            helpQuiz();
          });
        }
        

        cloneButtonContainer.appendChild(cloneHelpBtn);

In den Listen mit

.check-button den Eintrag .help-button 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.