Quiz mit Javascript erstellt - bitte um Code-Beurteilung

  • 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.

  • 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:

    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.

  • 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. :)

  • 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! :)

  • Zitat

    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.

  • 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?

  • 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 ... ;)

  • 1. wirst Du wahrscheinlich in jedem Fall tun müssen.

    Den Rest könntest Du u. U. vereinfachen, indem Du die Fragen und Antworten gleichzeitig in einen Container legst und mit display: flex; nebeneinander anordnest. Da der Default-Wert für align-items stretch ist haben dann alle Fragen und Antworten die selbe Höhe, die sich nach dem höchsten Element richtet. Diese kannst Du dann im Laufe des Spiels verwenden.

    Das wird auf jeden Fall funktionieren. Du musst nur dafür sorgen, dass das Ganze für den Spieler unsichtbar bleibt, z. B. indem Du es außerhalb des sichtbaren Browserfensters legst.

  • 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. :)

  • 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.

  • 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?

  • 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.

  • 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?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!