Dann wird die Opacity als „Stütze“ für das Folgende verwendet
Genau. Erst dachte ich daran, eine Statuskennung als Variable zu führen und diese auf "phase1" und "phase2" o. ä. zu setzen aber dann fiel mir ein, dass der Endwert der Opacity ja schon angibt, in welcher Phase wir uns befinden.
PS: Das "herausziehen" habe ich noch vergessen zu erkären. Ich habe es im Code von vorhin kommentiert, lade diese Seite neu und sieh es dir an.
btnQuestions war nur ein Hilfsbutton für mich zum Testen. Anscheinend ist es dir nicht gelungen, diesen Testcode auf dein Verhältnisse zu übertragen.
Ich war inzwischen nicht untätig, habe eine Testumgebung aufgebaut und einige Änderungen vorgenommen. Damit läuft der erste Teil der Animation jetzt ganz gut. Hier der geänderte Code:
function addListeners(countofquestions) {
function collectAnswers(callback, newCallback) {
for (let j = 0; j < answerBtns.length; j++) {
document.getElementById(j + 1).addEventListener('click', () => {
const answerNumber = document.getElementById(j + 1).getAttribute('id');
for (let j = 0; j < answerBtns.length; j++) {
document.getElementById(j + 1).style.cssText = 'opacity: .2; transition: opacity 1s linear';
}
document.getElementById(j + 1).style.cssText = 'opacity: 1; background-color: rgb(84, 146, 184)';
countPlayTime.style.cssText = 'opacity: .2; transition: opacity 1s linear';
givenAnswers.push(answerNumber);
callback(givenAnswers);
newCallback(i);
const realTrueNumber = new FormData();
realTrueNumber.append('id', i);
fetch('giveTrueNumbers.php', {
method: 'post',
body: realTrueNumber
}).then(truenumber => {
return truenumber.json();
}).then(truenumber => {
givenTrueNumbers.push(truenumber)
if (truenumber == answerNumber) {
correctAnswers.push('1');
}
});
i++;
pointerEventsOff();
const answerTxt = answerBtns[j].innerHTML;
stopTimer();
stopCTimer();
if (i <= countofquestions) {
// if (i <= 2) {
playpart.style.cssText = 'transform: rotateY(90deg); opacity: .2; transition: transform 1.5s 2s linear, opacity 1.5s 2s linear';
// playpart.addEventListener('transitionstart', function (event) {
// console.log('transitionstart', event);
// });
// playpart.addEventListener('transitionrun', function (event) {
// console.log('transitionrun', event);
// });
// Hier habe ich das addEventListener fuer "transitionend" geloescht
}
});
} // Ende der Schleife für das addEventListener fuer "click" auf eine Antwort
// und hier habe ich das addEventListener fuer "transitionend" wieder eingefuegt:
playpart.addEventListener('transitionend', function (event) {
if (event.target.id == 'playpart') {
console.log('transitionend', event);
const opacity = getComputedStyle(playpart).opacity;
console.log(opacity);
switch (opacity) {
case '0.2':
// Erste Phase beendet, jetzt neue Frage und Antworten lesen
countPlayTime.style.cssText = 'opacity: 1; transition: opacity 1s linear';
playpart.style.cssText = 'transform: rotateY(0); opacity: 1; transition: transform 1.5s linear, opacity 1s .5s linear';
makeQuestion();
resetTimer();
pointerEventsOn();
for (let j = 0; j < answerBtns.length; j++) {
document.getElementById(j + 1).style.cssText = 'opacity: 1; background-color: coral';
}
break;
case '1':
// Zweite Phase beendet, jetzt die nachfolgende Animation starten
break;
}
}
});
} // collectAnswers(callback, newCallback)
function afterGame() {
if (i == countofquestions) {
// if (i == 2) {
next.style.display = 'none';
noMoreQuestions.style.display = 'block';
stopTimer();
stopCTimer();
finalOverlay.style.cssText = 'display: grid';
finalOverlay.style.top = '-' + window.outerHeight + 'px';
setTimeout(function () {
finalOverlay.style.cssText = 'display: grid; top: 0; transition: top 3s ease-in';
},
1000);
}
} // afterGame()
}Ich habe auch heraus gefunden, warum Du ständig Events für die Buttons bekommen hast: Du hast für die Buttons ja auch die Opacity animiert. Für diese feuert auch das "transitionend". Und jetzt kommt das Eventbubbling ins Spiel: Fängt man das Event bei den Buttons nicht ab, bzw. ist dort dafür kein Eventlistener registriert, so steigt es wie eine Blase im Baum auf, erreicht dabei das div#playpart und feuert dort unseren Eventlistener. Lösung indem wir abfragen ob es sich auch um das #playpart handelt:
if (event.target.id == 'playpart') {
Ich mache mir bald ein wenig Vorwürfe, dass ich die Sache mit dem "transitionend" ins Spiel gebracht habe, denn es hat ja erst Mal alles durcheinander gebracht. Aber ich erinnere mich, dass dein Ziel bei dieser Sache ja vor allem das Lernen ist und da kann es nicht schaden, sich weiter mit den Listenern vertraut zu machen.
Kein div#playpart. Und kein transform, nur opacity.
Da bin ich auch noch nicht dahinter gekommen.
Aber ich habe inzwischen ein wenig weiter getestet und verstehe jetzt die Abläufe mit deinen Animationen besser. Hier mein Testcode:
<div id="playpart">
<button id="btn-question">Klick</button>
</div>
<script>
const btnQuestion = document.getElementById('btn-question');
const playpart = document.getElementById('playpart');
btnQuestion.addEventListener('click', event => {
playpart.style.cssText = 'transform: rotateY(90deg); opacity: .2; transition: transform 1.5s 2s linear, opacity 1.5s 2s linear';
// Listener für "transitionend" nicht hier registrieren
})
// ... sondern hier
playpart.addEventListener('transitionend', (event) => {
playpart.style.cssText = 'transform: rotateY(0); opacity: 1; transition: transform 1.5s linear, opacity 1s .5s linear';
console.log('transitionend', event);
const opacity = getComputedStyle(playpart).opacity;
console.log(opacity);
switch (opacity) {
case '0.2':
// Erste Phase beendet, jetzt neue Frage und Antworten lesen
break;
case '1':
// Zweite Phase beendet, jetzt die nachfolgende Animation starten
break;
}
})
</script>Ziehe als erste das Registrieren des Eventlisteners für "transitionend" aus dem anderen Listener heraus wie ich es in dem Code beschrieben habe.
PS: Ich habe mir deine aktualisierte Version angesehen und finde dort, dass bei den ersten beiden Events das event.target gleich div#playpart ist.
Ich erwarte eher nicht, dass das eine Sackgasse ist.
Ich habe mal rasch einen Test gemacht mit folgendem Ergebnis:
Animiert man zwei Eigenschaften, feuert das "transitionend" zwei Mal, d. h. einmal für jede Eigenschaft.
Unter event.propertyName findest Du die Eigenschaft, auf die sich das Event bezieht.
Versuche zunächst, ob die diese Infos weiter helfen.
Da geht ja wirklich die Post ab in der Console! Möglicher Weise muss ich da doch mal bis in die Details einsteigen, um dir weitere Hinweise zu geben.
Aber bevor ich das tue, zunächst diese zwei Hinweise:
playpart.addEventListener('transitionstart', function (event) {
console.log('transitionstart', event);
});An sich funktionieren die Timer in Javascript schon zuverlässig, natürlich nicht auf die Millisekunde genau. Probleme können jedoch dann auftreten, wenn Du auf etwas anderes wartest, wie in deinem Fall das Ende einer Transition. Dann kann man natürlich eine Art Reserve einplanen um sicher zu gehen, dass die Transition auch beendet ist. Was aber nicht wirklich befriedigend ist. Besser ist in dem Fall ein Event für den originalen Vorgang zu verwenden, was bei einer Transition ja möglich ist.
Was die Timer betrifft, ist es außerdem nicht ganz ausgeschlossen, dass man sich bei der Berechnung der Verzögerung verkalkuliert.
Ich bin da noch nicht in die Details eingestiegen, aber schon Mal zwei Hinweise:
Gilt der Link von früher (Posting #186) noch? Ohne das Ganze im Zusammenhang zu sehen, kann man die Frage wahrscheinlich nicht beantworten.
Und gibt es noch einen Link für die vorige Version mit dem Next-Button?
Mein spontaner erster Eindruck: Zu viele Timer 
Da nicht für und ich wünsche ebenfalls einen schönen Rest vom Sonntag!
Wenn ich mich richtig erinnere, hatten wir früher den Index der gewählten Antwort als POST-Parameter an ein PHP-Skript geschickt und ein boolean, das angibt, ob die Antwort richtig war, zurück bekommen. Das macht es zwar nicht völlig unmöglich, die richtige Antwort heraus zu bekommen aber ein ganzes Stück schwerer.
Du könntest dieses Verfahren auf alle Antworten erweitern, d. h. die Indizes der gewählten Antworten wieder als POST-Parameter an das Skript schicken und ein Array mit booleans zurück bekommen.
Wie schützt sich der Profi vor solchen unsinnigen Doppelungen und überflüssigem Code, der später zu Problemen führen kann?
Dafür kenne ich leider kein Patentrezept. Generell haben Programme oder Skripts die Tendenz, zu wachsen und zu wachsen und es wird dann immer schwerer, den Überblick zu behalten und zu erkennen, ob mehrfacher Code drin ist oder Ungereimtheiten. Eine Möglichkeit vorzubeugen ist, nach dem Prinzip KISS vorzugehen "keep it simple and stupid", anstatt den Code unnötig kompliziert zu machen.
Das ging mir früher mit CSS genau so: Ist man mit Programmiersprachen groß geworden, ist man es gewöhnt, dass man mit relativ wenigen Schlüsselworten und Kontrollstrukturen alles realisieren kann, was man möchte. CSS ist dagegen eine Auszeichnungssprache und kennt keine Kontrollstrukturen, dafür aber sehr viele Anweisungen und die Layouts, die man sich vorstellt, muss man damit realisieren. Ist aber alles eine Frage der Gewöhnung.
Erschwerend kommt hinzu, dass das Web ein schlechter Ratgeber ist wenn es um CSS und Layoutfragen geht, weil sehr viele veraltete Beschreibungen und Tutorials herum geistern. Du schreibst ja:
es scheint so viele verschiedene möglichkeiten zu geben, dinge zu formatieren, es scheint ungeheuer schwierig, sie sich zu merken.
Gefühlte 80% davon sind veraltet und man kann sie vergessen. Für den Anfang kann man immer nur sagen: Vergiss absolute Positionierung, Tabellen (jedenfalls wenn es sich nicht um echte tabellarische Daten handelt), float und absolute Maßangaben und mache dich statt dessen mit Flex- und Gridlayout vertraut.
Bis in die Details bin ich da nicht eingestiegen, aber ich habe den Eindruck, dass das Problem hier liegt:
next.addEventListener('click', () => {
makeQuestion();
resetTimer();
pointerEventsOn();
playpart.style.cssText = 'opacity: 1; transition: opacity 2s';
setTimeout(function () {
startTimer();
startCTimer();
},
700);
answeredOverlayTransform();
answerBlockReScale();
});Du schaltest die Pointerevents sofort ein, startest aber die Timer mit 700 ms Verzögerung. Wenn man jetzt während dieser Verzögerung schon klickt, sind die Timer noch gar nicht gestartet. Was dann damit passiert habe ich nicht untersucht. Versuche, die Pointerevents im Callback für setTimeout nach dem Starten der Timer einzuschalten.
Ein Video selbst zu hosten ist ja dank des HTML5-Videotags kein Problem. Aber die Bandbreite: Macht man es klein, damit es bei geringer Bandbreite ohne Ruckeln abgespielt wird, fehlt auf großen Bildschirmen die Qualität. Und umgekehrt. 
Ich habe jetzt mal erste Versuche mit variablen Bitraten durch unterschiedliche Sourcefiles unternommen. Und zwar mit diesem Plugin für videojs:
https://github.com/freakmaxi/videojs-adaptive-source/
Hier das Ergebnis:
https://webentwicklung.ulrichbangert.de/zeitraffer-win…lken/index.html
Ich habe einige Daten links oben eingeblendet:
Die gemessene Bitrate und die gewählte, die das Video hat. Ein Label, das die Auflösung angibt und den Typ.
Für Rückmeldungen wäre ich dankbar, insbesondere wie es bei geringer Bandbreite funktioniert.
Beste Grüße - Ulrich
Für das Neuladen der Seite gibt es auch location.reload(). Ich habe das getestet und dieses und window.location.href = window.location.href verhalten sich offenbar gleich. Stolpersteine sind mir nicht bekannt außer dass die Seite ein wenig flackern kann.
Eine Alternative ist, die notwendigen Aktionen selber auszuführen, also in deinem Fall den Index der Frage auf 0 zu setzen und dazu die Frage und die Antworten anzuzeigen. Allerdings habe ich keinen Überblick ob dies ausreichend ist oder noch mehr nötig ist, z. B. andere Variablen wieder auf den Anfangszustand setzen.
Guten Abend Failix, ich wünsche ebenfalls ein frohes und gesundes neues Jahr.
Und danke für die freundliche Worte.
Dein Javascript ist ja ein wenig unkonventionell, ich musste drei Mal überlegen, um zu verstehen, wie es funktioniert.
Ich empfehle, bei dem Verfahren mit JSON zu bleiben, also im PHP ein Array zu erzeugen und dieses in JSON zu kodieren:
$statement = $pdo->prepare("SELECT truenumber FROM questionsAnswers");
$statement->execute(array());
$rightNumbers = [];
while ($row = $statement->fetch()) {
$rightNumbers[] = $row['truenumber'];
}
echo json_encode($rightNumbers);Wahrscheinlich kann man auch mit fetchAll gleich das ganze Array erzeugen und dieses dann kodieren, aber das habe ich nicht untersucht.
Mit dem Code oben brauchst Du dann im Javascript überhaupt nichts zu tun sondern in rightInt liegt sofort ein dekodiertes Array vor.
Danke für die guten Wünsche, ich wünsche dir ebenfalls einen guten Start in die Woche und dass sich die Situation wegen Blitzeis bei dir rasch entspannt!
Auslagern in addListeners scheint OK zu sein, nur wird diese Funktion nicht aufgerufen. Siehe den zweiten Codeabschnitt in #162, dies muss ab Zeile 272 geändert werden.
Ich finde da dieses:
http://hot-virtual-keyboard.blogspot.com/2013/12/hot-vi…1-has-been.html
also anscheinend ist eine virtuelle Tastatur gemeint.