Beiträge von Failix

Failix · 6. Dezember 2021

Ich habe das TimeOut mit 10 ms in mein Script eingebaut und bekam falsche Werte. Dann habe ich die Zeit langsam nach oben angepasst, und erst bei 50 ms war die Berechnung richtig. Daraus habe ich geschlossen, dass die Verarbeitungszeit ein Kriterium ist und dass mein MAMP halt ein wenig träge reagiert.

Die Lösung mit CSS Grid finde ich beeindruckend, danke Dir herzlich! Überhaupt bin ich von CSS Grid sehr begeistert und habe aber bisher nur einen Bruchteil der Möglichkeiten nutzen können. Für mein Quiz werde ich auf alle Fälle Deine Idee verwenden.

Eine schöne Woche wünsche ich!

Failix · 6. Dezember 2021

Herzlichen Dank – mit der Berechnung im TimeOut funktioniert es, allerdings auf meinem Rechner erst ab 50 ms. 10 ms sind ihm zu wenig, dann ist die Berechnung falsch und der Wert noch zu gering. Bei diesem Vorgehen ist man also darauf angewiesen, dass der Server nicht allzu langsam antwortet.

Ich bin gespannt, ob das Ganze auch ohne JavaScript funktionieren würde, aber Du musst Dich nicht wirklich bemühen. Ich mache das hier ja zur zum Üben und komme auch erst wieder in einigen Tagen dazu …

Failix · 6. Dezember 2021

Wenn ich die Berechnung auf o. g. Zeile 17 durchführe, bekomme ich vier unterschiedliche Werte, von denen keiner etwas mit der Höhe des Divs zu tun hat. Liegt wohl an der Schleife für die vier Buttons.

Den richtigen Wert bekomme ich, wenn ich die Berechnung erst mit dem EventListener für den Klick auf einen der Button durchführe. Das ist dann aber zu spät, denn ich hätte den Wert gern schon vor dem ersten Klick.

Eine statische Demo habe ich im Grunde schon in #130 abgelegt: http://music-quiz.bplaced.net/test01/

Die beiden Divs playpart und redOverlay sollen dieselbe Höhe bekommen. Der Wert dieser Höhe wird gleichzeitig als negatives Margin für redOverlay benutzt, damit es zunächst unsichtbar ist. Nach Klick auf einen Button wird eine CSS-Transition hinzugefügt, die das rote Overlay (gefüllt mit entsprechendem Text) dann nach unten sliden lässt.

Die Höhe des Divs playpart ist nicht vorhersehbar, sondern abhängig von Faktoren wie Bildschirmbreite und vom User gewählter Schriftgröße, also wollte ich das gern mit Javascript sicherstellen. Ganz einfach, dachte ich mir anfangs ...

Und natürlich darf eins nicht fehlen: das Danke Sempervivum !

Failix · 6. Dezember 2021

Gerade glaubte ich, ein Problem beseitigt zu haben, da tritt es an anderer Stelle ganz verstärkt wieder auf:

Code

'use strict'

window.addEventListener('load', (event) => {

  let i = 1;
  let w = 1;

  const again = document.getElementById('again');
  const count = document.getElementById('count');
  const countQuestions = document.getElementById('countQuestions');
  const endOfGame = document.getElementById('endOfGame');
  const makeItBetterFour = document.getElementById('makeItBetterFour');
  const makeItBetterOne = document.getElementById('makeItBetterOne');
  const makeItBetterThree = document.getElementById('makeItBetterThree');
  const makeItBetterTwo = document.getElementById('makeItBetterTwo');
  const next = document.getElementById('next');
  const points = document.getElementById('points');
  const prologue = document.getElementById('prologue');
  const question = document.getElementById('question');
  const questionsAnswers = document.getElementById('questionsAnswers');
  const result = document.getElementById('result');
  const start = document.getElementById('start');

  const playpart = document.getElementById('playpart');
  console.log(playpart.offsetHeight)

  // Ermittelt die Anzahl der Fragen und ruft die Callback-Funktion auf:

  function getCountRows(callback) {
    fetch('countRows.php', {
      method: 'post',
    }).then(countofquestions => {
      return countofquestions.json();
    }).then(countofquestions => {
      callback(countofquestions);
    });
  }



  // Erstellt eine Frage, deren Antwortmöglichkeiten und die Punktzahl:

  function makeQuestion(countofquestions) {
    const oneQuestion = new FormData();
    oneQuestion.append('id', i);
    fetch('getQuestions.php', {
      method: 'post',
      body: oneQuestion
    }).then(questions => {
      return questions.json();
    }).then(questions => {

      count.innerHTML = i + '. Frage:';
      question.innerHTML = questions.question;
      for (let j = 0; j < questions.answers.length; j++) {
        document.getElementById(j + 1).style.display = 'block';
        document.getElementById(j + 1).innerHTML = questions.answers[j];

        document.getElementById(j + 1).addEventListener('click', () => {
          const answerNumber = document.getElementById(j + 1).getAttribute('id');


          // Prüft die Richtigkeit der gegebenen Antwort

          const trueNumber = new FormData();
          trueNumber.append('id', i);
          trueNumber.append('choosen', answerNumber);
          fetch('checkAnswer.php', {
            method: 'post',
            body: trueNumber
          }).then(rightInt => {
            return rightInt.json();
          }).then(rightInt => {

            if (rightInt.truenumber == true) {
              result.innerHTML = 'Richtig!';
              points.style.display = 'block';
              points.innerHTML = 'gesammelte Punkte: ' + rightInt.points;
              next.style.display = 'block';
              next.innerHTML = 'nächste Frage';
              w = 1;

              if (i == countofquestions) {
                next.style.display = 'none';
                endOfGame.style.top = '0';
                again.style.display = 'block';
                again.innerHTML = 'Noch mal?';
              }

            } else {
              result.innerHTML = '';
              points.innerHTML = '';
              next.style.display = 'none';
              again.style.display = 'none';
              if (w === 1) {
                wrongAnswerOne.style.top = '0';
              }
              if (w === 2) {
                wrongAnswerTwo.style.top = '0';
              }
              if (w === 3) {
                wrongAnswerThree.style.top = '0';
              }
              if (w >= 4) {
                wrongAnswerFour.style.top = '0';
              }
            }

          });

        });
      }

    });

  }

  getCountRows(makeQuestion);

});

Alles anzeigen

Das ist (gekürzt) das JavaScript für mein Musik-Quiz, jetzt mit window.addEventListener('load', (event), was beim Problem mit dem Google-Font die Lösung brachte. Hier funktioniert das aber nicht, denn das Laden der Inhalte aus der Datenbank bringt die Berechnung der Höhe für HTML-Elemente völlig durcheinander.

Die Höhe, die JavaScript für das HTML-Element mit der Quiz-Frage und den Antworten berechnet, ist die Höhe ohne Inhalte. Das Laden per PHP aus der Datenbank erfolgt also erst, wenn das JavaScript vollkommen ausgeführt wurde. Die Inhalte erzeugen dann eine wesentlich größere Höhe.

Wie gehe ich denn nun vor? Habe ich den EventListener falsch eingesetzt?

Leider kann ich kein Beispiel online stellen, da ich die DB nur lokal zur Verfügung habe.

---

Nachtrag: Habe gerade noch mal über das Ganze nachgedacht und oben wohl einen völlig falschen Ansatz gehabt. Im Gegensatz zu den Google-Fonts werden die Inhalte aus der DB ja im JavaScript selbst angefordert, also kann das mit dem EventListener gar nicht funktionieren. Ist eventuell das gesamte Script falsch aufgebaut?

Failix · 6. Dezember 2021

Deine Vermutung ist absolut richtig, und wie immer danke ich Dir für Deine schnelle Reaktion!

Ich hab’ unter o. g. Link mal zwei Textbeispiele eingefügt. Man sieht deutlich, dass der Designer des Google-Fonts den Durchschuss ganz anders berechnet als es beim serifenlosen Systemfont (i. d. R. Arial oder Helvetica) der Fall ist.

Failix · 5. Dezember 2021

Ich schlage mich schon einen halben Tag mit einem Problem herum, für das ich keine Lösung finde. Wenn Ihr Euch bitte einmal diese Seite anschauen würdet:

http://music-quiz.bplaced.net/test01/

Der flache rote Bereich ganz oben dürfte eigentlich gar nicht zu sehen sein, denn dieses Div mit der ID redOverlay hat ein negatives Margin, das der Höhe des Divs mit der ID playpart entspricht. Die Höhe bestimme ich mit offsetHeight im externen JavaScript.

Theoretisch eine simple Sache, die ich auch schon mehrfach angewendet habe, aber hier bleibt eine Differenz von 30 Pixeln zwischen der von Javascript ausgelesenen Höhe und der optischen bzw. mittels DevTools ermittelten Höhe von playpart.

Ich habe zum Debuggen nach und nach alles CSS und alles JavaScript entfernt, bis ich als offensichtlichen Verursacher etwas feststellte, das ich niemals erwartet hätte, nämlich:

Code

body {
  font-family: "Noto Sans JP", sans-serif;
...
}

Entfernt man "Noto Sans JP",, schreibt also nur font-family: sans-serif;, verschwinden auch die 30 Pixel Differenz. Und darauf kann ich mir keinen Reim machen. Gar keinen.

Wieso sollte eine Schriftart diesen Fehler auslösen? Ich habe andere Schriftfamilien eingebunden – dasselbe Ergebnis, höchstens mit einigen Pixeln unterschiedlicher Differenz.

Hat jemand von Euch eine Erklärung dafür? Oder habe ich einen Bug eingebaut, der so groß ist, dass ich ihn nicht sehe?

Failix · 29. November 2021

Herzlichen Dank, das mit dem doppelten Aufruf war mir nicht klar. Jetzt bin ich wieder ein Stückchen weiter gekommen.

Failix · 29. November 2021

Müssen der Zeile counter(getCounter); weitere Parameter hinzugefügt werden? Ich hab' s mal mit counter(getCounter(i, j)) versucht, aber das ist falsch. Wie wäre es korrekt?

Failix · 29. November 2021

Ich glaube, ich habe jetzt das Grundprinzip des Callbacks verstanden. Aber es bleiben Fragen offen ...

Code

function counter(callback) {
  for (let i = 0; i < 4; i++) {
    callback(i);
  }
  let j = 100;
  callback(j);
}

function getCounter(i) {
  console.log(i);
}
counter(getCounter);

Alles anzeigen

Bei diesem Code liefert mir die Funktion counter beide Werte, den von i und den von j. Das liegt vermutlich daran, dass beide mit dem Parameter callback übergeben werden. Ob ich in der Funktion getCounter von der Konsole i oder j ausgeben lasse, ist auch egal.

Also habe ich so etwas versucht:

Code

function counter(callback, newCallback) {
  for (let i = 0; i < 4; i++) {
    callback(i);
  }
  let j = 100;
  newCallback(j);
}

function getCounter(i, j) {
  console.log(i);
  console.log(j);
}
counter(getCounter);

Alles anzeigen

Das liefert die Fehlermeldung "Uncaught TypeError: newCallback is not a function at counter ...".

Wie müsste ich denn vorgehen, wenn die die Werte aus counter getrennt oder wahlweise übergeben möchte?

Failix · 28. November 2021

Sprachlich ist JavaScript eine echte Herausforderung für mich – gemeint ist damit, dass ich das, was ich als Code sehe, oft nur schwer in Worte fassen kann.

Ich schrieb es an anderer Stelle schon mal: Wenn ich den Code, den ich lese, nicht mit eigenen Worten beschreiben kann, dann habe ich ihn nicht verstanden, und wenn ich ihn nicht verstanden habe, gibt es Lernbedarf.

Mir ist es soeben gelungen, den Code für mein Musik-Quiz anzupassen, und er funktioniert! Danke noch einmal, Sempervivum – für Deine Geduld und Deine Unterstützung!

Ich werde jetzt mal schauen, ob ich bei YouTube ein Video zum Thema finde, denn ein wenig verfestigen sollte ich das heute Gelernte durchaus, und da wäre eine Kombination aus Bild und Ton sicher das hilfreichste.

Failix · 28. November 2021

Das habe ich jetzt verstanden, d. h. ich glaube es zu verstehen:

Code

// Hier wird eine Funktion definiert, die einen Wert zurückgeben soll:
function getCountRows(callback) { 
  
fetch('countRows.php', {
    method: 'post',
  }).then(ids => {
    return ids.json();
  }).then(ids => {

// Hier wird dieser Wert für die Rückgabe festgelegt:
    callback(ids);

  });
}

// Hier wird eine Funktion definiert, die den Wert aus der obigen Funktion entgegennehmen soll:
function doSomethingElse(ids) {

Hier wird ein der Wert an den Befehl übermittelt:  
console.log(ids);
}

// Hier wird die obige Funktion ausgeführt, die dann auch die zweite Funktion ausführt:
getCountRows(doSomethingElse);

Alles anzeigen

Ist das so halbwegs richtig ausgedrückt?

Und danke natürlich!

Failix · 28. November 2021

Ich kapiere gerade nichts, das nervt mich total. Vielleicht versuchen wir es mal ganz primitiv:

Code

// Ermittelt die Anzahl der Fragen und ruft die Callback-Funktion auf:
function getCountRows(callback) {
  // BTW: Offenbar brauchst Du hier keine Parameter,
  // daher kannst Du das FormData auch weg lassen:
  //const countIds = new FormData();
  fetch('countRows.php', {
    method: 'post',
    // body: countIds
    // BTW2: Mir scheint, der Name ids ist hier irreführend,
    // wir ermitteln die Anzahl der Fragen, nicht wahr?
  }).then(ids => {
    return ids.json();
  }).then(ids => {
    callback(ids);
  });
}

function doSomethingElse() {
  console.log(ids);
}
getCountRows(doSomethingElse);

Alles anzeigen

Was muss man tun, damit die Konsole die ids ausgibt? Ich habe das gesamte Prinzip vorn und hinten nicht verstanden.

Failix · 28. November 2021

Herzlichen Dank, das muss ich mir ganz in Ruhe ansehen und sicherlich den Code erst mal komplett auseinandernehmen, damit ich es verstehe. Auf den ersten Blick gibt's keine Erleuchtung bei mir.

Zu Deiner Frage im Kommentar: Die Anzahl der Fragen ist gleich der Anzahl der IDs, deswegen hatte ich es so benannt. Oder lauert da eine Fehlerquelle, die ich noch nicht sehe?

Failix · 28. November 2021

Wie immer vielen Dank für Deine schnelle Rückmeldung, Sempervivum ! Ich habe zunächst countIds in eine Funktion countRows() gepackt, sie beginnt auf Zeile 30 und endet auf Zeile 118, umgibt also alles andere in der Funktion questionsAndAnswers().

Code

'use strict'

let i = 1;
let w = 1;

const again = document.getElementById('again');
const count = document.getElementById('count');
const countQuestions = document.getElementById('countQuestions');
const endOfGame = document.getElementById('endOfGame');
const makeItBetterFour = document.getElementById('makeItBetterFour');
const makeItBetterOne = document.getElementById('makeItBetterOne');
const makeItBetterThree = document.getElementById('makeItBetterThree');
const makeItBetterTwo = document.getElementById('makeItBetterTwo');
const next = document.getElementById('next');
const points = document.getElementById('points');
const prologue = document.getElementById('prologue');
const question = document.getElementById('question');
const questionsAnswers = document.getElementById('questionsAnswers');
const result = document.getElementById('result');
const start = document.getElementById('start');
const wrongAnswerFour = document.getElementById('wrongAnswerFour');
const wrongAnswerOne = document.getElementById('wrongAnswerOne');
const wrongAnswerThree = document.getElementById('wrongAnswerThree');
const wrongAnswerTwo = document.getElementById('wrongAnswerTwo');

function questionsAndAnswers() {

  // Ermittelt die Anzahl der Reihen in der DB

  function countRows() {

    const countIds = new FormData();
    fetch('countRows.php', {
      method: 'post',
      body: countIds
    }).then(ids => {
      return ids.json();
    }).then(ids => {

      // Erstellt eine Frage, deren Antwortmöglichkeiten und die Punktzahl

      const oneQuestion = new FormData();
      oneQuestion.append('id', i);
      fetch('getQuestions.php', {
        method: 'post',
        body: oneQuestion
      }).then(questions => {
        return questions.json();
      }).then(questions => {

        start.style.display = 'none';
        prologue.style.display = 'none';
        questionsAnswers.style.display = 'block';
        count.innerHTML = i + '. Frage:';
        question.innerHTML = questions.question;
        for (let j = 0; j < questions.answers.length; j++) {
          document.getElementById(j + 1).style.display = 'block';
          document.getElementById(j + 1).innerHTML = questions.answers[j];

          document.getElementById(j + 1).addEventListener('click', () => {
            const answerNumber = document.getElementById(j + 1).getAttribute('id');

            // Prüft die Richtigkeit der gegebenen Antwort

            const trueNumber = new FormData();
            trueNumber.append('id', i);
            trueNumber.append('choosen', answerNumber);
            fetch('checkAnswer.php', {
              method: 'post',
              body: trueNumber
            }).then(rightInt => {
              return rightInt.json();
            }).then(rightInt => {

              if (rightInt.truenumber == true) {
                result.innerHTML = 'Richtig!';
                points.style.display = 'block';
                points.innerHTML = 'gesammelte Punkte: ' + rightInt.points;
                next.style.display = 'block';
                next.innerHTML = 'nächste Frage';
                w = 1;

                if (i == ids) {
                  next.style.display = 'none';
                  endOfGame.style.top = '0';
                  again.style.display = 'block';
                  again.innerHTML = 'Noch mal?';
                }

              } else {
                result.innerHTML = '';
                points.innerHTML = '';
                next.style.display = 'none';
                again.style.display = 'none';
                if (w === 1) {
                  wrongAnswerOne.style.top = '0';
                }
                if (w === 2) {
                  wrongAnswerTwo.style.top = '0';
                }
                if (w === 3) {
                  wrongAnswerThree.style.top = '0';
                }
                if (w >= 4) {
                  wrongAnswerFour.style.top = '0';
                }
              }

            }); // Ende - Prüft die Richtigkeit der gegebenen Antwort

          }); // Ende - Eventlistener
        } // Ende - Schleife

      }); // Ende - Erstellt eine Frage, deren Antwortmöglichkeiten und die Punktzahl

    }); // Ende - Ermittelt die Anzahl der Reihen in der DB

  } // function countRows Ende
  countRows()

} // function questionsAndAnswers Ende

start.addEventListener('click', () => {
  questionsAndAnswers()
});

again.addEventListener('click', () => {
  i = 1;
  questionsAndAnswers()
  again.style.display = 'none';
  result.innerHTML = '';
});

next.addEventListener('click', () => {
  i++;
  questionsAndAnswers()
  next.style.display = 'none';
  result.innerHTML = '';
});

wrongAnswerOne.style.top = '-' + (window.innerHeight + 100) + 'px';
wrongAnswerOne.style.height = window.innerHeight + 'px';
wrongAnswerTwo.style.top = '-' + (window.innerHeight + 100) + 'px';
wrongAnswerTwo.style.height = window.innerHeight + 'px';
wrongAnswerThree.style.top = '-' + (window.innerHeight + 100) + 'px';
wrongAnswerThree.style.height = window.innerHeight + 'px';
wrongAnswerFour.style.top = '-' + (window.innerHeight + 100) + 'px';
wrongAnswerFour.style.height = window.innerHeight + 'px';
endOfGame.style.top = '-' + (window.innerHeight + 100) + 'px';
endOfGame.style.height = window.innerHeight + 'px';

makeItBetterOne.addEventListener('click', () => {
  wrongAnswerOne.style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});
makeItBetterTwo.addEventListener('click', () => {
  wrongAnswerTwo.style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});
makeItBetterThree.addEventListener('click', () => {
  wrongAnswerThree.style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});
makeItBetterFour.addEventListener('click', () => {
  wrongAnswerFour.style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});
again.addEventListener('click', () => {
  endOfGame.style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});

Alles anzeigen

Zum Callback (unbekanntes Land bisher für mich) habe ich gegoogelt und unter anderem dieses Beispiel gefunden:

Code

function doSomething(callback) {
  /* ... */
  callback();
  /* ... */
}

function doSomethingElse() {
  console.log('Callback aufgerufen');
}
doSomething(doSomethingElse);  // Ausgabe: "Callback aufgerufen"

Das kann ich zwar nachvollziehen, verstehe den Sinn aber nicht. Demzufolge gelingt es mir auch nicht, das Beispiel für meinen Code zu abstrahieren. Für weitere Erläuterungen wäre ich sehr, sehr dankbar.

Failix · 28. November 2021

Ich habe immer noch bzw. immer wieder Probleme mit der richtigen Verschachtelung. Hier mein aktueller Code:

Code

let i = 1;
let w = 1;

function questionsAndAnswers() {

  // Ermittelt die Anzahl der Reihen in der DB

  const countIds = new FormData();
  fetch('countRows.php', {
    method: 'post',
    body: countIds
  }).then(ids => {
    return ids.json();
  }).then(ids => {

    // Erstellt eine Frage, deren Antwortmöglichkeiten und die Punktzahl

    const oneQuestion = new FormData();
    oneQuestion.append('id', i);
    fetch('getQuestions.php', {
      method: 'post',
      body: oneQuestion
    }).then(questions => {
      return questions.json();
    }).then(questions => {

      document.getElementById('start').style.display = 'none';
      document.getElementById('prologue').style.display = 'none';
      document.getElementById('questionsAnswers').style.display = 'block';
      document.getElementById('count').innerHTML = i + '. Frage:';
      document.getElementById('question').innerHTML = questions.question;
      for (let j = 0; j < questions.answers.length; j++) {
        document.getElementById(j + 1).style.display = 'block';
        document.getElementById(j + 1).innerHTML = questions.answers[j];

        document.getElementById(j + 1).addEventListener('click', () => {
          const answerNumber = document.getElementById(j + 1).getAttribute('id');

          // Prüft die Richtigkeit der gegebenen Antwort

          const trueNumber = new FormData();
          trueNumber.append('id', i);
          trueNumber.append('choosen', answerNumber);
          fetch('checkAnswer.php', {
            method: 'post',
            body: trueNumber
          }).then(rightInt => {
            return rightInt.json();
          }).then(rightInt => {

            if (rightInt.truenumber == true) {
              document.getElementById('result').innerHTML = 'Richtig!';
              document.getElementById('points').style.display = 'block';
              document.getElementById('points').innerHTML = 'gesammelte Punkte: ' + rightInt.points;
              document.getElementById('next').style.display = 'block';
              document.getElementById('next').innerHTML = 'nächste Frage';
              w = 1;

              if (i == ids) {
                document.getElementById('next').style.display = 'none';
                document.getElementById('endOfGame').style.top = '0';
                document.getElementById('again').style.display = 'block';
                document.getElementById('again').innerHTML = 'Noch mal?';
              }

            } else {
              document.getElementById('result').innerHTML = '';
              document.getElementById('points').innerHTML = '';
              document.getElementById('next').style.display = 'none';
              document.getElementById('again').style.display = 'none';
              if (w === 1) {
                document.getElementById('wrongAnswerOne').style.top = '0';
              }
              if (w === 2) {
                document.getElementById('wrongAnswerTwo').style.top = '0';
              }
              if (w === 3) {
                document.getElementById('wrongAnswerThree').style.top = '0';
              }
              if (w >= 4) {
                document.getElementById('wrongAnswerFour').style.top = '0';
              }
            }

          }); // Ende - Prüft die Richtigkeit der gegebenen Antwort

        }); // Ende - Eventlistener
      } // Ende - Schleife

    }); // Ende - Erstellt eine Frage, deren Antwortmöglichkeiten und die Punktzahl

  }); // Ende - Ermittelt die Anzahl der Reihen in der DB

}// function questionsAndAnswers Ende

document.getElementById('start').addEventListener('click', () => {
  questionsAndAnswers()
});

document.getElementById('again').addEventListener('click', () => {
  i = 1;
  questionsAndAnswers()
  document.getElementById('again').style.display = 'none';
  document.getElementById('result').innerHTML = '';
});

document.getElementById('next').addEventListener('click', () => {
  i++;
  questionsAndAnswers()
  document.getElementById('next').style.display = 'none';
  document.getElementById('result').innerHTML = '';
});

document.getElementById('wrongAnswerOne').style.top = '-' + (window.innerHeight + 100) + 'px';
document.getElementById('wrongAnswerOne').style.height = window.innerHeight + 'px';
document.getElementById('wrongAnswerTwo').style.top = '-' + (window.innerHeight + 100) + 'px';
document.getElementById('wrongAnswerTwo').style.height = window.innerHeight + 'px';
document.getElementById('wrongAnswerThree').style.top = '-' + (window.innerHeight + 100) + 'px';
document.getElementById('wrongAnswerThree').style.height = window.innerHeight + 'px';
document.getElementById('wrongAnswerFour').style.top = '-' + (window.innerHeight + 100) + 'px';
document.getElementById('wrongAnswerFour').style.height = window.innerHeight + 'px';
document.getElementById('endOfGame').style.top = '-' + (window.innerHeight + 100) + 'px';
document.getElementById('endOfGame').style.height = window.innerHeight + 'px';

document.getElementById('makeItBetterOne').addEventListener('click', () => {
  document.getElementById('wrongAnswerOne').style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});
document.getElementById('makeItBetterTwo').addEventListener('click', () => {
  document.getElementById('wrongAnswerTwo').style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});
document.getElementById('makeItBetterThree').addEventListener('click', () => {
  document.getElementById('wrongAnswerThree').style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});
document.getElementById('makeItBetterFour').addEventListener('click', () => {
  document.getElementById('wrongAnswerFour').style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});
document.getElementById('again').addEventListener('click', () => {
  document.getElementById('endOfGame').style.top = '-' + (window.innerHeight + 100) + 'px';
  w++;
});

Alles anzeigen

Schauen wir auf Zeile 4 und 8: Die Funktion questionsAndAnswers() startet mit dem Objekt countIds, alle weiteren Elemente der Funktion sind darin verschachtelt. Das Objekt countIds erzeugt den String ids, welcher mir die Anzahl der Reihen in der DB liefert. Diese Zahl brauche ich, um das Ende des Spiels ermitteln zu können, und deshalb ist countIds auch das äußerste Objekt der Funktion. Es funktioniert tadellos.

Nun würde ich den String ids aber auch gern außerhalb der Funktion questionsAndAnswers() verwenden, um diese Zahl in einem Prolog zum Spiel anzuzeigen, also bevor questionsAndAnswers() ausgeführt wird. Ist das irgendwie möglich?

Die meiner Meinung nach unschöne Lösung wäre, das Objekt countIds außerhalb der Funktion zu duplizieren. Das würde funktionieren, aber ist es denn ein sauberer Weg? Irgendwas lässt mich daran zweifeln ...

Die Frage ist also: Kann ich den String ids irgendwie außerhalb der Funktion questionsAndAnswers() anwenden, ohne das Objekt countIds zu duplizieren?

Failix · 28. November 2021

Ob eine der unzähligen Erweiterungen für VSC Dir das Einfügen von Links erleichtert, kann ich nicht sagen, ich hatte nie Bedarf daran. Was auf alle Fälle funktioniert, sind die Verwendung von PHP und eine Live-Ansicht der gerade bearbeiteten Seite.

Um mir immer gleiche Arbeitsschritte zu erleichtern, benutze ich gern Makros, diese allerdings in Notepad++. Hier werden die Makros als XML abgelegt und können jederzeit angepasst werden. Das wäre eventuell auch interessant für Dich.

Failix · 26. November 2021

Uwe Graf Koks Wäre jetzt nicht der richtige Zeitpunkt, Dich von WYSIWYG zu verabschieden und Dir eine richtig gute, aber dauerhaft kostenlose Software zur Code-Bearbeitung zuzulegen? Dann bist Du a) alle Probleme mit irgendwelchen veralteten oder überteuerten Programmen los und hast b) eine steigende Lernkurve, was Dir in jedem Fall zugutekommen wird.

Ein Programm wie Visual Studio Code beispielsweise (ja, eine Open-Source-Software von Microsoft!) unterstützt Dich massiv beim Schreiben des Codes und nervt Dich nicht mit unverständlichen Fehlermeldungen. Etliche Erweiterungen stehen zur Verfügung und erleichtern das Codeschreiben zusätzlich. Aber VSC ist nur eine Möglichkeit von vielen ...

Failix · 14. November 2021

Willkommen, julian41!

Ist es eine gute Nachricht, wenn ich schreibe, dass bei mir (Firefox 94.0.1 unter Win 10) alles wie erwartet funktioniert? Ich kann die Checkboxen und auch die Buttons anklicken.

Failix · 14. November 2021

Endlich hatte ich mal wieder etwas Zeit ...

Wie ich in #99 schrieb, störte mich die Redundanz in der Datenbank. Ich hatte ja die richtige Antwort als Kopie einer der Fragen in der Spalte trueanswer hinterlegt. Heute war es mein Ziel, eine Spalte truenumber anzulegen, diese mit der Ziffer der richtigen Antwort zu befüllen und dann mit PHP und Javascript diese Spalte auszuwerten.

Und es ist mir gelungen. Das PHP anzupassen, war nicht sonderlich schwer, aber fürs JavaScript "musste" ich erst was lernen, und zwar getAttribute, damit ich statt des Inhalts der Antwort die ID des Antwortbuttons auslesen konnte. Das hat wunderbar geklappt, ich bin ein klein wenig stolz auf mich, dass ich mal was ganz ohne Fragen hinbekommen habe.

Hier ist das Ergebnis: http://music-quiz.bplaced.net/index1.html

Failix · 8. November 2021

Es ist geschafft, das gesamte Konstrukt funktioniert jetzt endlich. Und Dir, Sempervivum, wiederum ganz herzlichen Dank! Ich hätte das ohne Dich nicht hinbekommen – vor allem bei PHP sind meine Kenntnisse noch völlig unzureichend.

Die Vorgehensweise mit dem Debugger, die Du oben zeigst, habe ich gerade nachvollzogen, und nein – selbst wenn ich auf die Idee gekommen wäre, ihn zu benutzen, wäre mir das große "A" nicht aufgefallen. Einen direkten Hinweis, dass es falsch ist, liefert der Debugger ja auch nicht, es muss einem schon wirklich ins Auge stechen.

Was mich freut: Der Umgang mit MySQL war viel einfacher, als ich zunächst befürchtet hatte. Datenbanken waren bis vor kurzem für mich die großen, geheimnisvollen Unbekannten, jetzt wirken sie schon fast etwas vertraut. Wichtig ist es für mich nun, PHP so weit zu verstehen, dass ich MySQL auch optimal nutzen kann.

Ich werde deshalb sicher wieder mit Fragen ankommen, aber nicht hier im JavaScript-Bereich, versteht sich.

Jetzt wünsche ich erst mal allerseits einen guten Start in die Woche, bleibt gesund!

Beiträge von Failix

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Probleme mit Dreamweaver

Probleme mit Dreamweaver

Layer Problem: CSS-Button im Firefox nicht anklickbar

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung