Beiträge von Failix

    Hallo zusammen,


    ich habe nun eine Woche PHP-Unterricht hinter mir. Meine Hausaufgabe ist es, ein Formular zu erstellen, dessen Werte in einer Session-ID gespeichert werden. Nach dem Absenden des Formulars werden dem User alle Einträge noch einmal gezeigt, und er kann ggf. mit einem Zurück-Link ins Formular zurückkehren und seine Angaben ändern, die sich dank der Session-ID noch immer in den Formularfeldern befinden. Das habe ich alles hinbekommen, es funktioniert.


    Was nicht funktioniert, sind mehrere Checkboxen. Wenn ich eine davon auswähle, das Formular absende und mir die Ausgabe auf der Ergebnisseite anschaue, ist alles in Ordnung, nur der Wert der gewählten Checkbox wird angezeigt. Kehre ich aber zum Formular zurück, sind alle drei Boxen ausgewählt. Meine Überprüfung mit isset funktioniert hier also nicht. Das ist der Code:



    Ich komme nicht darauf, welchen Wert ich zusätzlich prüfen müsste, damit das "checked" nur für die wirklich gesetzten Checkboxen übernommen wird. Oder muss ich bei mehreren Checkboxen ganz anders vorgehen?


    Ich danke im Voraus für jede Hilfe!


    Gruß

    Felix


    ---


    Nachtrag: Ich habe hier mal den entsprechenden Code in einem funktionierenden PHP-Dokument, bereinigt um alles Überflüssige. Das macht es bestimmt einfacher für Euch. Sorry, hätte ich schon vorhin machen sollen. :|


    Ich bin ein Stückchen weitergekommen:


    Wenn ich den Text samt HTML-Code mit innerHTML in ein bereits im DOM vorhandenes HTML-Element einsetze, wird der Code ordnungsgemäß geparst.


    In obigem Beispiel werden die HTML-Elemente selbst aber auch erst mit JavaScript ins DOM geschrieben, dann folgt der Text mit HTML-Code, und dort wird das HTML nicht geparst.


    Habe ich diesen Zusammenhang richtig erkannt? Falls ja, wie muss ich weiter vorgehen?

    Vom geschützten Leerzeichen bin ich vor Jahren weggekommen, weil es in Chrome immer viel zu große Abstände erzeugt hat. Mir ist die CSS-Version lieber.


    Ich habe mal ein Beispiel online gestellt:

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

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


    Hier beginnt auf Zeile 58 die Konstante questionsanswersonly, in der ich behelfsweise alle Fragen und Antworten mal als JSON-Array direkt abgelegt habe. Im Browser auf der index.html wird „… landete 2021 mit <span class="nowrap">Good 4 U</span> einen Hit …“ ausgegeben, das meinte ich.


    Habe ich hier etwas falsch gemacht?


    Genauso wird es auch angezeigt, wenn ich a) das HTML direkt in die DB schreibe oder b) ein str_replace benutze.

    Eine Frage aus einer ganz anderen Richtung, für die ich bei Google nicht die richtigen Worte finden konnte, um sie selbst zu beantworten …


    Ich möchte Teile meiner Texte im Quiz mit HTML-Code umgeben, z. B. <span class="nowrap">Good 4 U</span>. Ich könnte das direkt so in die DB eintragen, ich könnte es mit einem str_replace in der PHP-Datei erledigen, aber solange der Code in meinem JSON-Array steht, wird er nicht als HTML interpretiert, sondern als Klartext ausgegeben.


    Wie und an welcher Stelle kann ich das ändern, also HTML auch als HTML interpretieren lassen?

    So, das hat funktioniert wie geplant. Aber eine ganz andere Frage kam dabei auf: Kann man mit JavaScript eigentlich spontan auf eine Größenänderung des Viewports reagieren? Angenommen, jemand würde während des Spiels die Größe seines Browserfensters ändern, dann wären meine Berechnungen danach natürlich falsch.


    Hier kommt der Vorteil von CSS zum Tragen, das ist klar. Mich würde trotzdem interessieren, ob es mit Javascript möglich ist, window.innerWidth und window.innerHeight zu aktualisieren, ohne das Browserfenster neu zu laden.

    Vielen Dank für den Tipp … an so eine CSS-Lösung habe ich gar nicht gedacht. Die probiere ich dann als zweite Variante.


    Die erste, oben von mir beschriebene, Variante ist allerdings eine gute Übung in JavaScript. Über Math.max wusste ich heute Morgen noch nichts, das will ich doch wirklich mal ausprobieren. :)

    Wie man beim Durchklicken meines Quiz sehen kann, variiert durch unterschiedliche Länge der Fragen die Höhe des Elements div class="question backgroundLight", besonders deutlich auf Geräten mit schmalen Bildschirmen zu sehen. Das stört mich, da dadurch auch die Position der Antwortbuttons verschieden ist, und ich möchte es verhindern, indem ich div class="question backgroundLight" eine feste Höhe gebe.


    Eine feste Höhe … natürlich nicht irgendeine, sondern eine, die ich vorab per JavaScript ermittle. Ich habe mich gerade dazu belesen, und folgende Vorgehensweise ist mir dazu eingefallen:

    1. Ich generiere zu Beginn des Spiels alle Fragen mit den umgebenden Div-Elementen.
    2. Ich lese die Höhe aller Div-Elemente aus und speichere diese Werte in einem Array.
    3. Ich ermittle den höchsten Wert in diesem Array.
    4. Ich setze diesen Wert als Höhe für alle Div-Elemente der Fragen während des Spiels.

    Und ich frage mich und natürlich Euch, ob das auch irgendwie einfacher gehen könnte ... ;)

    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:



    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:



    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.