Beiträge von Sempervivum

document.getElementById('repeater').addEventListener('click', () => {
            document.getElementById('question').style.display = 'block';
            document.getElementById('answer').style.display = 'block';
            document.getElementById('oneMoreTime').style.display = 'none';
            i = 0;
            // Das Folgende unbedingt in eine Funktion auslagern,
            // denn jetzt haben wir diesen Block schon drei Mal:
            document.getElementById('countQa').innerHTML = questions.length;
            document.getElementById('one').innerHTML = '1. Frage';
            document.getElementById('two').innerHTML = questions[0].two;
            document.getElementById('three').innerHTML = questions[0].three;
            document.getElementById('four').innerHTML = questions[0].four;
            document.getElementById('five').innerHTML = questions[0].five;
            document.getElementById('six').innerHTML = questions[0].six;

        })

    <div id="wr-question">
        
        <!-- In die beiden Spans die Nummer und den Text der Frage eintragen: -->
        <p><span id="nr-question"></span>.Frage</p>
        <p><span id="question"></span></p>

    </div>

    <div id="wr-answers">
        <!-- In die p-Elemente jeweils den Text der Antwort eintragen: -->
        <input type="radio" name="fourQuestions">
        <p id="answer1"></p>
        <input type="radio" name="fourQuestions">
        <p id="answer2"></p>
        <input type="radio" name="fourQuestions">
        <p id="answer3"></p>
        <input type="radio" name="fourQuestions">
        <p id="answer4"></p>
        <i class="fas fa-smile"></i> Richtig! Du bist gut ...
        <i class="fas fa-sad-tear"></i> Das war wohl nichts ...
        <button id="button">nächste Frage</button>

        <div id="end">Das war's!</div>

    </div>

    // Mit der folgenden Zeile wird der Eventlistener registriert:
    document.getElementById('clicker').addEventListener('click', () => {
      // Ab hier beginnt das Innere der anonymen Funktion. Hier gelangt man erst hin wenn das Event feuert
      // und die Funktion aufgerufen wird, beim Laden der Seite jedoch noch nicht. Setze auf die folgende
      // Zeile einen Haltpunkt, dann kannst Du dich davon überzeugen.
      if (status === 'showQuestion') {
        document.getElementById('questionAnswers').innerHTML = '<p>' + questionsAndAnswers[counter].question + '</p>';
        status = 'showAnswer';
        document.getElementById('clicker').classList.remove('blink');
        document.getElementById('clicker').style.backgroundColor = 'dodgerblue';
        document.getElementById('lastwords').classList.remove('morecolor');
        document.getElementById('questionAnswers').classList.remove('hidden');
        document.getElementById('questionAnswers').classList.remove('lesscolor');
        let question = 'zur ' + (counter + 1) + '. Antwort';
        document.getElementById('clicker').innerHTML = question;
      }
      else {
        document.getElementById('questionAnswers').innerHTML = '<p>' + questionsAndAnswers[counter].answer + '</p>';
        status = 'showQuestion';
        document.getElementById('clicker').style.backgroundColor = 'teal';
        let answer = 'zur ' + (counter + 2) + '. Frage';
        document.getElementById('clicker').innerHTML = answer;
        counter++;
        if (counter === questionsAndAnswers.length && status === 'showQuestion') {
          counter = 0;
          document.getElementById('clicker').innerHTML = 'Ende!';
          function myTimeout1() {
            document.getElementById('lastwords').style.display = 'inline-block';
          }
          function myTimeout2() {
            document.getElementById('lastwords').classList.add('morecolor');
            document.getElementById('questionAnswers').classList.add('lesscolor');
          }
          function myTimeout3() {
            document.getElementById('clicker').innerHTML = again;
          }
          function myTimeout4() {
            document.getElementById('clicker').style.backgroundColor = 'none';
            document.getElementById('clicker').classList.add('blink');
          }
          const sequence = [
            {
              // Die Zeit, um die der Aufruf der Funktion (callback)
              // verzögert werden soll:
              delay: 50,
              // Die Funktion, die aufgerufen werden soll:
              callback: myTimeout1
            },
            { delay: 500, callback: myTimeout2 },
            { delay: 3000, callback: myTimeout3 },
            { delay: 1500, callback: myTimeout4 },
          ];
          // Bearbeitet jeweils einen Eintrag im Array sequence:
          function doIt() {
            // Die aktuelle Aktion wird nach der gewünschten Verzögerung ausgeführt:
            timer = setTimeout(() => {
              // Die Funktion aufrufen, die im aktuellen Datensatz in dem Array
              // sequence als callback eingetragen ist, z. B. myTimeout2
              // beim zweiten Datensatz:
              sequence[idx].callback();
              // Index für das Array sequence erhöhen:
              idx++;
              // Sind wir noch nicht am Ende des Arrays sequence angelangt?
              if (idx < sequence.length) {
                // Den aktuellen Eintrag im Array (nach Erhöhen des Index)
                // bearbeiten:
                doIt();
                console.log(timer)
              }
            }, sequence[idx].delay)
            // Der zweite Parameter beim Aufruf der Funktion setTimeout ist die Verzögerungszeit.
            // Diese ist im Array sequence unter delay eingetragen, z. B. 500 
            // beim zweiten Datensatz.
          }
          let
            // Wir beginnen mit dem ersten Datensatz in sequence,
            // also den Index auf 0 setzen:
            idx = 0,
            // Timervariable, hier wird die ID des aktuellen Timers
            // gespeichert, wir brauchen sie, um den Timer abbrechen zu können:
            timer;
          // Jetzt beginnen wir die Sequenz durch den Aufruf der Funktion doIt:
          doIt();
          document.getElementById('clicker').addEventListener('click', () => {
            if (timer) {
              clearTimeout(timer);
            }
          });
        }
      }
    }); // Hier ist jetzt das Registrieren des Eventlisteners beendet und wenn
        // weitere Anweisungen vorhanden wären, würde der Debugger beim Stepping
        // dort wieder anhalten.