Beiträge von Failix

Habe gerade mal probiert, ob if (opacity == .2) und else if (opacity == 1) statt switch (opacity) auch ihren Dienst tun, und es scheint zu funktionieren. Ist es nur ein weiterer Weg, um nach Rom zu kommen, oder hat es für mich noch nicht ersichtliche Nachteile?

Gerade war ich beim Durchschauen des Codes und dachte mir „Ah, hier ist also der Eventlistener jetzt beendet und ein neuer beginnt“, da kam Deine Ergänzung.

Ich glaube, ich habe es verstanden, und zwar so: Der Eventlistener auf den Antwortbuttons sorgt lediglich dafür, dass die erste CSS-Transition für playpart gestartet wird. Der nachfolgende Eventlistener reagiert auf diese Transition und startet, wenn sie beendet ist.

Dann wird die Opacity als „Stütze“ für das Folgende verwendet: Während sie auf 0.2 steht, werden u. a. neue Fragen geladen und die Opacity von playpart wieder auf 1 gesetzt. Und erst, wenn sie bei 1 angekommen ist, können weitere Befehle ausgeführt werden.

Und ich denke, ich muss pointerEventsOn() in case '1' verschieben, denn dort starten auch die Timer neu.

Eine fantastische Lösung. Getestet habe ich sie noch nicht, aber ich gehe davon aus, dass ich meine Timing-Probleme nun los bin. Und ja, ich habe wieder was gelernt, danke!

Also, erstens: Herzlichen Dank!

Zweitens: Du musst Dir natürlich keinerlei Vorwürfe machen, wenn Du hier irgendwas ins Spiel bringst. Ob ich’s verstehe, steht auf einem ganz anderen Blatt. Und ja, mein Ziel – nicht vor allem, sondern ausschließlich – ist hier das Lernen. Und jetzt habe ich sogar verstanden, was Bubbling bedeutet.

Die ganze Mühe, die Du Dir machst, und die ganze Zeit, die Du für mich opferst, führen hoffentlich dazu, dass ich immer mehr verstehe. Ohne Deine Hilfe – das schrieb ich schon mal – wäre ich ganz schön verloren gewesen.

Den aktuellen Code, den Du mir jetzt geschickt hast, schaue ich mir ganz in Ruhe an. Und: siehe Zeile 1.

Herzlichen Dank, aber ich verstehe leider nicht, was gemeint ist. Ich kriege es nicht in meinen Code eingebaut, es funktioniert nichts mehr.

Woher kommt die Konstante btnQuestion? Ich habe doch diese vier Buttons, die jeweils auf einen Klick reagieren müssen. Und was bedeutet „herausziehen des Eventlisteners“?

Das Switch-Statement ist neu für mich, aber das wiederum scheint mir recht gut zu verstehen zu sein, belese mich gerade dazu.

Hm, warum sehe ich dann (im Firefox) nur das:

12:07:51.324 transitionend

transitionend { target: button#1

, propertyName: "opacity", pseudoElement: "" }

musicQuiz.js:392:21

12:07:51.329 transitionend

transitionend { target: button#2

, propertyName: "opacity", pseudoElement: "" }

musicQuiz.js:392:21

12:07:51.330 transitionend

transitionend { target: button#4

, propertyName: "opacity", pseudoElement: "" }

musicQuiz.js:392:21

12:07:51.330 transitionend

transitionend { target: div#countPlayTime

, propertyName: "opacity", pseudoElement: "" }

musicQuiz.js:392:21

12:07:52.341 transitionend

transitionend { target: div#countPlayTime

, propertyName: "opacity", pseudoElement: "" }

musicQuiz.js:392:21

Kein div#playpart. Und kein transform, nur opacity. Ich kapiere es gerade gar nicht mehr.

Unsere beiden Postings (mein Nachtrag gerade in #194 und Dein #195) haben sich überschnitten. Der Parameter target sagt so ungefähr das, was ich vermutet habe.

Die Transition für playpart selbst ist in der Konsole von Firefox gar nicht zu sehen, in Chrome schon. Das nächste Rätsel …

Online-Beispiel ist aktualisiert.

Hm, ich komme mit den Events für das Ende einer Transition nicht klar:

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

http://music-quiz.bplaced.net/test07/musicQuiz.js

Auf Zeile 381 startet die Transition für das Element playpart. Dann gibt die Konsole die verschiedenen Events aus, und es sind etliche. Vor allem werden transitionstart und transitionend zweimal ausgegeben. Mir scheint, da wird auch das Ende der Verzögerung als transitionendangesehen.

Und deshalb funktioniert auch die folgende Transition absolut nicht. Was habe ich hier wieder falsch gemacht?

---

Nachtrag: Das Problem liegt offensichtlich in den beiden Transitions, die auf den Zeilen 347 und 350 ablaufen. Die hier veränderten Elemente liegen im Element playpart und bringen wohl dadurch den Ablauf durcheinander. Entferne ich diese beiden Transitions (was natürlich eigentlich nicht gewollt ist), funktioniert der Eventlistener für playpart wie gewünscht.

Muss ich mich jetzt von dieser ganzen Vorgehensweise verabschieden? Sieht nach einer Sackgasse aus.

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.

Danke Dir!

Die Funktionen für die nächste Frage habe ich vom Next-Button übernommen, das war mein erster Schritt und das funktioniert ja auch einwandfrei.

Danach wollte ich die Effekte und Verzögerungen einsetzen und bekam o. g. Probleme. Jetzt schaue ich mir natürlich den von Dir genannten Link an und versuche, alles dementsprechend umzubauen.

Mir scheint, es gibt generell Probleme mit Timeouts in JavaScript, oder? Man kann sich nicht darauf verlassen, dass die Timer exakt hintereinander ablaufen, wie mein Beispiel zeigt. Aber was ist die Ursache dafür?

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 bastle gerade an einer Version meines Spiels, bei der die nächste Frage geladen wird, sobald man eine Antwort gegeben hat, ohne dass man einen Weiter-Button drücken muss. Aber ich habe ein Problem mit der dabei verwendeten Timeout-Funktion. Hier der entsprechende Code-Schnipsel:

if (i <= countofquestions) {

  playpart.style.cssText = 'transform: rotateY(90deg); opacity: .2; transition: transform 1.5s 2s linear, opacity 1.5s 2s linear';

  setTimeout(function () {
    playpart.style.cssText = 'transform: rotateY(0); opacity: 1; transition: transform 1.5s linear, opacity 1s .5s linear';
    makeQuestion();
    resetTimer();
    pointerEventsOn();
  },
    3500);

  setTimeout(function () {
    startTimer();
    startCTimer();
  },
    5000);

}

Solange die Gesamtzahl der Fragen nicht erreicht ist, soll nach dem Klick auf einen Antwortbutton (Eventlistener hier im Codebeispiel nicht enthalten) der Bereich des Spiels gedreht und eine Transparenz gesetzt werden. Diese Transition hat eine Verzögerung von 2 Sekunden und dauert 1,5 Sekunden.

Sind diese 3,5 Sekunden vorüber, startet der Inhalt der Timeout-Funktion. Drehung und Transparenz werden zurückgesetzt, die neue Frage wird geladen, der Timer zurückgesetzt und die Pointerevents eingeschaltet.

Das funktioniert theoretisch sehr gut und praktisch nur in 70, 80 % der Fälle. Ab und zu – unregelmäßig – kommt das Timing durcheinander. Dann werden die Elemente aus der Timeout-Funktion geladen, bevor die erste Transition abgeschlossen ist.

Ich ahnte irgendwie beim Erstellen bereits, dass diese Konstruktion ziemlich fragil aussieht. Die zeitliche Abstimmung der einzelnen Events scheint so nicht zu funktionieren. Wie kann man das auf sichere Füße stellen?

---

Nachtrag: Ich habe gerade die Verzögerung von 2 Sekunden aus der CSS-Transition entfernt und in ein JavaScript-Timeout gesetzt. Hier der geänderte Code:

if (i <= countofquestions) {

  setTimeout(function () {
  playpart.style.cssText = 'transform: rotateY(90deg); opacity: .2; transition: transform 1.5s linear, opacity 1.5s linear';
  },
    2000);

  setTimeout(function () {
    playpart.style.cssText = 'transform: rotateY(0); opacity: 1; transition: transform 1.5s linear, opacity 1s .5s linear';
    makeQuestion();
    resetTimer();
    pointerEventsOn();
  },
    3500);

  setTimeout(function () {
    startTimer();
    startCTimer();
  },
    5000);

}

Der Effekt ist das Gegenteil dessen, was ich gehofft hatte. Die Abläufe haben sich nicht verbessert, sondern verschlechtert – die Fehlfunktion tritt jetzt noch häufiger auf, der zweite Timer startet, bevor der erste beendet ist. Ich wäre wirklich für Hilfe sehr dankbar, da mein Konzept offensichtlich falsch ist.

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!

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!

Heute Morgen ist mir noch was eingefallen …

Ursprünglich war es mal mein Ziel, dass ein User die richtigen Antworten nicht vorm Spiel auslesen kann. Das war in einer älteren Version auch der Fall. Und jetzt habe ich im Eifer des Gefechts die Datei http://music-quiz.bplaced.net/mq05/giveTrueNumbers.php eingeführt und mir dabei selbst ein Bein gestellt.

Ich meine, hier geht es um nichts, aber es ärgert mich trotzdem. Gibt es denn eine Möglichkeit, dass auch für erfahrene User solche „Betrugsmöglichkeiten“ nicht im Quelltext erkennbar sind?

Ich konnte pointerEventsOn() komplett aus diesem Eventlistener entfernen, denn ich hatte diese Funktion schon in die Funktion startTimer() integriert. Jetzt scheint alles zu funktionieren.

Wie schützt sich der Profi vor solchen unsinnigen Doppelungen und überflüssigem Code, der später zu Problemen führen kann?

Wow, Du hast echt einen Blick für sowas! Was Du schreibst, klingt sehr nachvollziehbar, aber ich kann es erst morgen Nachmittag umsetzen, bin gespannt...

Vielen Dank!

So, ich bin am Ziel angekommen ... dachte ich noch vor einer Stunde. Aber ich habe ein Timing-Problem.

Hier die aktuelle Version: http://music-quiz.bplaced.net/mq05/ und http://music-quiz.bplaced.net/mq05/musicQuiz.js

Spielt man das Quiz wie ein "ganz normaler Mensch", scheint alles bestens zu funktionieren. Legt man es aber darauf an, ganz besonders schnell zu sein, funktionieren die Timer nicht mehr – oder besser gesagt: Sie stoppen irgendwann im Laufe des Spiels nicht mehr an der Stelle, an der sie es sollten.

Auf Zeile 413 des Scripts wird die Funktion answerBlock() aufgerufen, diese beginnt auf Zeile 69. In dieser Funktion wiederum werden die Funktionen stopTimer() und stopCTimer() aufgerufen, welche auf den Zeilen 132 und 210 zu finden sind.

Klickt man die Buttons ohne Hinzuschauen so schnell wie möglich hintereinander, werden diese beiden Stop-Funktionen mitten im Spiel nach ein paar Fragen nicht mehr ausgeführt. Ich habe ein console.log(csec) eingebaut, dort sieht man es gut. Die Variable csec dürfte nur hochgezählt werden, während eine Frage auf ihre Beantwortung wartet, sobald man einen Button klickt, muss das Hochzählen bis zur nächsten Frage unterbrochen werden.

Da dies in normaler Spielgeschwindigkeit gelingt, aber nicht, wenn man unnatürlich schnell klickt, vermute ich ein Performance-Problem. Ich habe bewusst noch nicht versucht, das Ganze umzubauen, sondern ich wollte gern Eure Meinung dazu wissen. Ist diese Verschachtelung, die ich mit den Funktionen gemacht habe, nicht das Gelbe vom Ei, sollte man sowas besser vermeiden?

Herzlichen Dank!

In der neuen Version meines Quiz muss ich eine Menge auf den Ausgangszustand zurücksetzen, Transparenzen, Rotationen und vor allem in Variablen gespeicherte Werte. Da ist es schon praktisch, das mit einem Reload zu erledigen.

Also, wenn es keine Fallstricke und Stolpersteine gibt, dann lasse ich es so. Und die neue Version ist auf der Zielgeraden … glaube ich.

Mir stellte sich gerade die Frage: Gibt es eine mit JavaScript ausführbare Funktion, die alles, was ein JavaScript bewirkt hat, zurücksetzt – oder anders, eine Funktion, die einem Reload des Browserfensters gleichkommt, also einfach alles wieder bei null beginnen lässt?

Ich habe mir window.location.href = window.location.href ergoogelt, scheint auch zu funktionieren. Gibt’s irgendwelche Stolpersteine, von denen ich noch nichts ahne?

Angewendet werden soll diese Funktion per Buttonklick für Wiederholung des o. g. Quiz.

Herzlichen Dank für Eure Antworten!

jonas3344 Ich glaube, ich habe verstanden, was zu tun war. Die Variable $questions erzeugt das Array für $answers, was ich ahnungslos mit echo '['; und echo ']'; versucht hatte. Richtig?