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.
Ich müsste also, nachdem eine Antwort gegeben worden ist, die jeweilige richtige Antwort per ID aus der Datenbank holen und in ein Array speichern, wenn ich es richtig sehe. Dann hätte man nur Zugriff auf die Antworten, für die man schon eine Entscheidung getroffen hat.
Was den Code angeht: Ich hatte ab und zu das Gefühl, dass ich langsam den Überblick verliere. 
Für mich ist das Ganze schon ziemlich komplex, habe versucht, es durch Kommentare und größere Abstände zwischen den einzelnen Bereichen übersichtlicher zu machen. Dass sich da allerdings eine Funktion doppelt versteckt, wurde mir dadurch auch nicht verraten. Und nur durch ständiges Testen kriegt man die Bugs dann wirklich zu fassen.
Ich wünsche Dir einen schönen Sonntag … und natürlich danke für Deine wie immer superschnelle Antwort!
Da nicht für und ich wünsche ebenfalls einen schönen Rest vom Sonntag!
So, ich habe es geschafft. Jetzt wird die Ziffer der richtigen Antwort erst nach Beantwortung der jeweiligen Frage aus der DB geholt und in ein Array gespeichert. Ist also doch etwas bei mir hängengeblieben. 
Der Link ist noch derselbe: http://music-quiz.bplaced.net/mq05/
Falls ich sonst noch etwas übersehen habe oder andere Bugs auftauchen, bin ich für eine Info dankbar. Schönen Abend und einen guten Start in die Woche!
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
Guten Morgen und wie immer danke für die schnelle Reaktion!
Der Link von #186 funktioniert noch und verweist auf die ältere Version mit Next-Button.
Habe die neue Version jetzt online gestellt:
http://music-quiz.bplaced.net/test06/
http://music-quiz.bplaced.net/test06/musicQuiz.js
Inzwischen hatte ich noch einiges versucht, z. B. auch eine Verschachtelung der Timer, aber es wurde eher schlimmer …
Wichtig wäre mir aber hier wirklich die exakte zeitliche Abstimmung der Ereignisse. Danke!
Ich bin da noch nicht in die Details eingestiegen, aber schon Mal zwei Hinweise:
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.
Dass die Verzögerung aus der CSS-Transition sich nicht exakt auf das Timeout von JS abstimmen lässt, hatte ich bereits im Vorfeld geahnt. Sehr erstaunt war ich allerdings, dass die ausschließliche Verwendung von JS-Timeouts (zweites Codebeispiel in #187) zu noch größeren Problemen führt.
Eine Zeitreserve ist in meinem Fall nicht machbar, da sie sich optisch auswirken würde. Und deshalb habe ich auch genau kalkuliert – wenn der Effekt korrekt funktioniert, funktioniert er wunderbar. Aber „wenn“ ist halt nicht die Bedingung, mit der ich zufrieden bin.
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);
});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.
PS: Ich habe mir deine aktualisierte Version angesehen und finde dort, dass bei den ersten beiden Events das event.target gleich div#playpart ist.
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.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!